Всем привет,

Меня зовут Сагар, я инженер-программист из Индии.

Пока я работал, я заметил, что многие люди борются с работой с вложенным JSON. В основном это люди, которые работают фронтенд-инженерами, поскольку они не понимают важности структур данных и поэтому не могут кодировать так же эффективно, как могли бы, если бы у них было хоть какое-то базовое представление о вещах, о которых я буду говорить сегодня.

Итак, в основном мы возьмем реальный повседневный пример и преобразуем его в объект JSON в JavaScript.

Возьмем для примера сумку ученицы 12 класса. Мы представим сумку как объект JSON, а затем выполним некоторые операции с этими данными.

Прежде всего, давайте подумаем, как мы будем изображать сумку. Объект JSON очень гибок, так как не требует жесткой структуры и предопределенных ключей.
Это можно сделать двумя способами:
1. Представление сумки с ее свойствами (компания сумки, вместимость и т. д.). )
2. Представление сумки с ее свойствами

Давайте возьмем пример со свойствами и создадим объект из этих свойств.

  1. Сначала мы берем пустой объект, такой как const bagObj = {};
  2. Сумка может иметь фиксированную вместимость, которую мы можем указать с помощью bagObj['capacity'] = '5L';
  3. Он также может быть связан с компанией, поэтому bagObj['company'] = 'Example Company';
  4. Сумка также может содержать несколько книг, поэтому мы можем определить книгу как объект JSON, имеющий некоторые свойства, такие как заголовок, страницы, тип, тема.
  5. Итак, давайте создадим пустой массив в нашем объекте и запишем в него все книги bagObj['content'] = [];
  6. Теперь давайте затолкнем все наши книги в сумку
bagObj['content'].push({title:'Flamingo',pages:100,
type:'Soft Cover',subject:'English'})
bagObj['content'].push({title:'History',pages:100,
type:'Soft Cover',subject:'History'})
bagObj['content'].push({title:'Mathematics',pages:100,
type:'Hard Cover',subject:'Maths'})
bagObj['content'].push({title:'Science',pages:100,
type:'Soft Cover',subject:'Science'})

Итак, теперь каждая книга помещается в массив содержимого, и мы видим, что наш объект будет выглядеть примерно так:

Итак, теперь, когда наш объект готов, давайте выполним некоторые операции над bagObj, чтобы наше понимание стало лучше, чем было раньше.

  1. Предположим, что объект возвращается любым API в том же формате, что и наш объект, но разница в том, что мы не знаем, сколько там книг, и нас просят выяснить, содержит ли он книгу с subject == 'Maths' и если да. есть более одной, то мы можем вернуть все книги, где subject=='Maths'.
  2. Давайте напечатаем названия всех книг в нашей сумке.
const filteredBooks = bagObj.content.filter(book=>book.subject==='Maths');
// 1. this will return an array of all maths book in the bagObj
console.log(filteredBooks)
console.log(bagObj.content.map(book=>book.title))
// 2. Print name of all the books in the bag

Поэтому я надеюсь, что вы хорошо понимаете, как работать с объектами JSON и получать от них то, что вы хотите, и как создавать их с нуля.