Как перебрать структуру JSON?
У меня есть следующая структура JSON:
[{"id":"10", "class": "child-of-9"}, {"id": "11", "classd": "child-of-10"}]
Как мне перебрать её с помощью JavaScript?
При переборе я столкнулся с проблемой, так как некоторые объекты имеют разные ключи. В частности, у первого объекта есть ключ class, а у второго — classd. Мне нужно извлечь значения для ключа id и class (или classd, если его нет). Как правильно реализовать это в коде?
5 ответ(ов)
Ваш код выглядит хорошо, но есть несколько вещей, которые стоит учесть, особенно если вы работаете с объектами в JavaScript.
Вот как он работает:
- Вы создаете массив объектов
arr, где каждый объект содержит идентификаторidи классclass. - Основной цикл
forпроходит по каждому элементу массиваarr. - Для каждого объекта из массива вы используете цикл
for-in, чтобы перебрать все ключи объекта и вывести их значение на страницу.
Вот сам код для ясности:
var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "class": "child-of-10"}];
for (var i = 0; i < arr.length; i++) {
document.write("<br><br>array index: " + i);
var obj = arr[i];
for (var key in obj) {
var value = obj[key];
document.write("<br> - " + key + ": " + value);
}
}
Обратите внимание, что for-in действительно хорошо подходит для простых объектов. Однако, как вы упомянули, для DOM-объектов это не самый лучший подход, поскольку он также может перебрать и унаследованные свойства, что может привести к неожиданным результатам. Для надежного перебора свойств объекта, лучше использовать метод Object.keys(obj) в сочетании с forEach или обычный цикл for.
Пример использования Object.keys:
var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "class": "child-of-10"}];
for (var i = 0; i < arr.length; i++) {
document.write("<br><br>array index: " + i);
var obj = arr[i];
Object.keys(obj).forEach(function(key) {
var value = obj[key];
document.write("<br> - " + key + ": " + value);
});
}
Таким образом, вы избежите проблем, связанных с унаследованными свойствами, и ваш код станет более предсказуемым.
Вы можете использовать цикл for...of, чтобы перебрать массив объектов и вывести на экран имя каждого автомобиля. Вот пример кода:
var mycars = [{name: 'Susita'}, {name: 'BMW'}];
for (var car of mycars) {
document.write(car.name + "<br />");
}
В результате выполнения этого кода на веб-странице будет отображено:
Susita
BMW
Цикл for...of позволяет удобно итерировать по элементам массива, что делает код более читаемым и простым для понимания.
Ваш код выглядит правильно, однако есть несколько мелочей, на которые стоит обратить внимание. Основная логика работы уже написана верно, но для лучшего понимания и избежания потенциальных ошибок, можно предоставить некоторые рекомендации.
- Используйте
letилиconstвместоvar, чтобы избежать проблем с областью видимости переменных:
const jsonObject = {
name: 'Amit Kumar',
age: '27' // рекомендую использовать строчные буквы для ключей в JSON
};
В этом коде вам нужно быть аккуратным с регистровыми именами переменных. В случае написания ключей в объекте, принято использовать строчные буквы, особенно для базовых данных.
Для итерации по объектам лучше использовать метод
Object.keys(), который возвращает массив ключей объекта. Это может улучшить читаемость вашего кода:
for (const prop of Object.keys(jsonObject)) {
alert("Ключ: " + prop);
alert("Значение: " + jsonObject[prop]);
}
Таким образом, весь фрагмент кода будет выглядеть следующим образом:
const jsonObject = {
name: 'Amit Kumar',
age: '27'
};
for (const prop of Object.keys(jsonObject)) {
alert("Ключ: " + prop);
alert("Значение: " + jsonObject[prop]);
}
Это даст вам более современный и безопасный подход к работе с объектами в JavaScript. Если у вас есть дополнительные вопросы или нужно разъяснение, не стесняйтесь задавать!
Если у вас есть массив данных dataArray, как в примере:
var dataArray = [{"id":28,"class":"Sweden"}, {"id":56,"class":"USA"}, {"id":89,"class":"England"}];
то следующий код использует jQuery для обхода элементов массива:
$(jQuery.parseJSON(JSON.stringify(dataArray))).each(function() {
var ID = this.id;
var CLASS = this.class;
});
Однако в данном примере нет необходимости использовать jQuery.parseJSON и JSON.stringify, так как dataArray уже является корректным массивом объектов JavaScript. Можно обойти массив проще, как показано ниже:
dataArray.forEach(function(item) {
var ID = item.id;
var CLASS = item.class;
// здесь можно использовать переменные ID и CLASS
});
Или с использованием forEach:
dataArray.forEach(({ id, class: CLASS }) => {
// Вы можете использовать переменные id и CLASS здесь
});
Таким образом, ваш код становится более привычным для JavaScript и читабельным.
Код, который вы привели, создает объект person и затем использует цикл for...in для перебора всех его свойств, объединяя значения этих свойств в одну строку. Для наглядности, вот что происходит по шагам:
- Создается объект
personс полямиfname,lnameиage. - Объявляется переменная
text, в которую будет записываться результат. - С помощью цикла
for...inпроисходит перебор всех свойств объектаperson, гдеx- это имя текущего свойства. - Значение каждого свойства добавляется к строке
text.
В конечном итоге, переменная text будет содержать строку John Doe 25.
Вот полный код:
var person = {fname: "John", lname: "Doe", age: 25};
var text = "";
for (var x in person) {
text += person[x] + " "; // добавляем пробел между значениями
}
console.log(text.trim()); // выводим строку без лишнего пробела в конце
Результат будет: John Doe 25. Обратите внимание, что в коде выше добавлен пробел между значениями, и используется trim() для удаления лишнего пробела в конце.
Преобразование объекта JS в строку JSON
Как сравнить массивы в JavaScript?
Как перебрать обычный объект JavaScript с объектами в качестве элементов?
Как прочитать JSON-файл в память сервера?
Использование immutability-helper в React для установки ключа переменной объекта