Всем привет,
Меня зовут Сагар, я инженер-программист из Индии.
Пока я работал, я заметил, что многие люди борются с работой с вложенным JSON. В основном это люди, которые работают фронтенд-инженерами, поскольку они не понимают важности структур данных и поэтому не могут кодировать так же эффективно, как могли бы, если бы у них было хоть какое-то базовое представление о вещах, о которых я буду говорить сегодня.
Итак, в основном мы возьмем реальный повседневный пример и преобразуем его в объект JSON в JavaScript.
Возьмем для примера сумку ученицы 12 класса. Мы представим сумку как объект JSON, а затем выполним некоторые операции с этими данными.
Прежде всего, давайте подумаем, как мы будем изображать сумку. Объект JSON очень гибок, так как не требует жесткой структуры и предопределенных ключей.
Это можно сделать двумя способами:
1. Представление сумки с ее свойствами (компания сумки, вместимость и т. д.). )
2. Представление сумки с ее свойствами
Давайте возьмем пример со свойствами и создадим объект из этих свойств.
- Сначала мы берем пустой объект, такой как
const bagObj = {};
- Сумка может иметь фиксированную вместимость, которую мы можем указать с помощью
bagObj['capacity'] = '5L';
- Он также может быть связан с компанией, поэтому
bagObj['company'] = 'Example Company';
- Сумка также может содержать несколько книг, поэтому мы можем определить книгу как объект JSON, имеющий некоторые свойства, такие как заголовок, страницы, тип, тема.
- Итак, давайте создадим пустой массив в нашем объекте и запишем в него все книги
bagObj['content'] = [];
- Теперь давайте затолкнем все наши книги в сумку
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
, чтобы наше понимание стало лучше, чем было раньше.
- Предположим, что объект возвращается любым API в том же формате, что и наш объект, но разница в том, что мы не знаем, сколько там книг, и нас просят выяснить, содержит ли он книгу с
subject == 'Maths'
и если да. есть более одной, то мы можем вернуть все книги, гдеsubject=='Maths'.
- Давайте напечатаем названия всех книг в нашей сумке.
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 и получать от них то, что вы хотите, и как создавать их с нуля.