Доступ / обработка (вложенные) объекты, массивы или JSON
У меня есть вложенная структура данных, содержащая объекты и массивы. Как я могу извлечь информацию, то есть получить доступ к определенным или множественным значениям (или ключам)?
Например:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
Как я мог получить доступ к name второго пункта в items?
31 ответ
прелиминарии
JavaScript имеет только один тип данных, который может содержать несколько значений: Object. Массив - это особая форма объекта.
(Обычный) Объекты имеют форму
{key: value, key: value, ...}
Массивы имеют форму
[value, value, ...]
И массивы и объекты выставляют key -> value состав. Ключи в массиве должны быть числовыми, тогда как любая строка может использоваться в качестве ключа в объектах. Пары ключ-значение также называются "свойствами".
Свойства могут быть доступны либо с использованием точечной нотации
const value = obj.someProperty;
или обозначение в скобках, если имя свойства не будет допустимым именем идентификатора JavaScript [spec], или имя является значением переменной:
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
По этой причине доступ к элементам массива возможен только в скобках:
const value = arr[5]; // arr.5 would be a syntax error
// property name / index as variable
const x = 5;
const value = arr[x];
Подождите... как насчет JSON?
JSON - это текстовое представление данных, как XML, YAML, CSV и другие. Чтобы работать с такими данными, их сначала нужно преобразовать в типы данных JavaScript, то есть массивы и объекты (и как работать с ними только что было объяснено). Как разобрать JSON объясняется в вопросе Parse JSON в JavaScript?,
Дальнейшее чтение материала
Доступ к массивам и объектам является фундаментальным знанием JavaScript, и поэтому желательно прочитать руководство по MDN JavaScript, особенно разделы
Доступ к вложенным структурам данных
Вложенная структура данных - это массив или объект, который ссылается на другие массивы или объекты, т.е. его значения являются массивами или объектами. К таким структурам можно получить доступ, последовательно применяя точечные или скобочные обозначения.
Вот пример:
const data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
Давайте предположим, что мы хотим получить доступ к name второго пункта.
Вот как мы можем сделать это шаг за шагом:
Как мы можем видеть data является объектом, поэтому мы можем получить доступ к его свойствам с помощью точечной нотации. items Свойство доступно следующим образом:
data.items
Значение является массивом, для доступа ко второму элементу мы должны использовать скобочную запись:
data.items[1]
Это значение является объектом, и мы снова используем точечную запись для доступа к name имущество. Итак, мы в итоге получаем:
const item_name = data.items[1].name;
В качестве альтернативы, мы могли бы использовать скобочную запись для любого из свойств, особенно если имя содержит символы, которые сделали бы его недопустимым для использования точечной нотации:
const item_name = data['items'][1]['name'];
Я пытаюсь получить доступ к собственности, но я получаю только undefined назад?
Большую часть времени, когда вы получаете undefined объект / массив просто не имеет свойства с таким именем.
const foo = {bar: {baz: 42}};
console.log(foo.baz); // undefined
использование console.log или же console.dir и проверить структуру объекта / массива. Свойство, к которому вы пытаетесь получить доступ, может быть фактически определено для вложенного объекта / массива.
console.log(foo.bar.baz); // 42
Что если имена свойств являются динамическими, и я не знаю их заранее?
Если имена свойств неизвестны или мы хотим получить доступ ко всем свойствам объекта / элементов массива, мы можем использовать for...in [MDN] цикл для объектов и for Цикл [MDN] для массивов для перебора всех свойств / элементов.
Объекты
Перебирать все свойства data мы можем перебрать объект так:
for (const prop in data) {
// `prop` contains the name of each property, i.e. `'code'` or `'items'`
// consequently, `data[prop]` refers to the value of each property, i.e.
// either `42` or the array
}
В зависимости от того, откуда берется объект (и что вы хотите сделать), вам, возможно, придется проверять на каждой итерации, является ли свойство действительно свойством объекта или унаследованным свойством. Вы можете сделать это с Object#hasOwnProperty [MDN].
Как альтернатива for...in с hasOwnProperty, ты можешь использовать Object.keys [MDN], чтобы получить массив имен свойств:
Object.keys(data).forEach(function(prop) {
// `prop` is the property name
// `data[prop]` is the property value
});
Массивы
Перебирать все элементы data.items массив, мы используем for цикл:
for(let i = 0, l = data.items.length; i < l; i++) {
// `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration
// we can access the next element in the array with `data.items[i]`, example:
//
// var obj = data.items[i];
//
// Since each element is an object (in our example),
// we can now access the objects properties with `obj.id` and `obj.name`.
// We could also use `data.items[i].id`.
}
Можно также использовать for...in перебирать массивы, но есть причины, по которым этого следует избегать: почему 'for(var item in list)' с массивами считается плохой практикой в JavaScript?,
С увеличением поддержки браузером ECMAScript 5, метод массива forEach [MDN] также становится интересной альтернативой:
data.items.forEach(function(value, index, array) {
// The callback is executed for each element in the array.
// `value` is the element itself (equivalent to `array[index]`)
// `index` will be the index of the element in the array
// `array` is a reference to the array itself (i.e. `data.items` in this case)
});
В средах, поддерживающих ES2015 (ES6), вы также можете использовать for...of Цикл [MDN], который работает не только для массивов, но и для любых итераций:
for (const item of data.items) {
// `item` is the array element, **not** the index
}
В каждой итерации for...of непосредственно дает нам следующий элемент итерируемого, нет "индекса" для доступа или использования.
Что если "глубина" структуры данных мне неизвестна?
В дополнение к неизвестным ключам также может быть неизвестна "глубина" структуры данных (то есть, сколько вложенных объектов). Как получить доступ к глубоко вложенным свойствам, обычно зависит от точной структуры данных.
Но если структура данных содержит повторяющиеся шаблоны, например, представление двоичного дерева, решение обычно включает в себя рекурсивный доступ к каждому уровню структуры данных.
Вот пример, чтобы получить первый листовой узел двоичного дерева:
function getLeaf(node) {
if (node.leftChild) {
return getLeaf(node.leftChild); // <- recursive call
}
else if (node.rightChild) {
return getLeaf(node.rightChild); // <- recursive call
}
else { // node must be a leaf node
return node;
}
}
const first_leaf = getLeaf(root);
const root = {
leftChild: {
leftChild: {
leftChild: null,
rightChild: null,
data: 42
},
rightChild: {
leftChild: null,
rightChild: null,
data: 5
}
},
rightChild: {
leftChild: {
leftChild: null,
rightChild: null,
data: 6
},
rightChild: {
leftChild: null,
rightChild: null,
data: 7
}
}
};
function getLeaf(node) {
if (node.leftChild) {
return getLeaf(node.leftChild);
} else if (node.rightChild) {
return getLeaf(node.rightChild);
} else { // node must be a leaf node
return node;
}
}
console.log(getLeaf(root).data);Более общий способ получить доступ к вложенной структуре данных с неизвестными ключами и глубиной - это проверить тип значения и действовать соответственно.
Вот пример, который добавляет все примитивные значения внутри вложенной структуры данных в массив (при условии, что он не содержит никаких функций). Если мы сталкиваемся с объектом (или массивом), мы просто вызываем toArray снова на это значение (рекурсивный вызов).
function toArray(obj) {
const result = [];
for (const prop in obj) {
const value = obj[prop];
if (typeof value === 'object') {
result.push(toArray(value)); // <- recursive call
}
else {
result.push(value);
}
}
return result;
}
const data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
function toArray(obj) {
const result = [];
for (const prop in obj) {
const value = obj[prop];
if (typeof value === 'object') {
result.push(toArray(value));
} else {
result.push(value);
}
}
return result;
}
console.log(toArray(data));Помощники
Поскольку структура сложного объекта или массива не обязательно очевидна, мы можем проверять значение на каждом шаге, чтобы решить, как двигаться дальше. console.log [MDN] и console.dir [MDN] помогите нам сделать это. Например (вывод консоли Chrome):
> console.log(data.items)
[ Object, Object ]
Здесь мы видим, что это data.items это массив с двумя элементами, которые оба являются объектами. В консоли Chrome объекты могут быть даже расширены и проверены немедленно.
> console.log(data.items[1])
Object
id: 2
name: "bar"
__proto__: Object
Это говорит нам о том, что data.items[1] является объектом, и после его расширения мы видим, что у него есть три свойства, id, name а также __proto__, Последнее является внутренним свойством, используемым для цепочки прототипов объекта. Тем не менее, цепочка прототипов и наследование выходят за рамки этого ответа.
Вы можете получить к нему доступ таким образом
data.items[1].name
или же
data["items"][1]["name"]
Оба пути равны.
Объекты и массивы имеют много встроенных методов, которые могут помочь вам в обработке данных.
Примечание: во многих примерах я использую функции стрелок. Они похожи на выражения функций, но они связывают this значение лексически.
Object.keys(), Object.values() (ES 2017) и Object.entries() (ES 2017)
Object.keys() возвращает массив ключей объекта, Object.values() возвращает массив значений объекта и Object.entries() возвращает массив ключей объекта и соответствующих значений в формате [key, value],
const obj = {
a: 1
,b: 2
,c: 3
}
console.log(Object.keys(obj)) // ['a', 'b', 'c']
console.log(Object.values(obj)) // [1, 2, 3]
console.log(Object.entries(obj)) // [['a', 1], ['b', 2], ['c', 3]]Object.entries() с назначением цикла и деструктуризацией
const obj = {
a: 1
,b: 2
,c: 3
}
for (const [key, value] of Object.entries(obj)) {
console.log(`key: ${key}, value: ${value}`)
}Очень удобно повторять результат Object.entries() с циклом for и деструктурирующим назначением.
Цикл For-of позволяет перебирать элементы массива. Синтаксис for (const element of array) (мы можем заменить const с var или же let, но лучше использовать const если мы не собираемся изменять element).
Разрушающее присваивание позволяет извлекать значения из массива или объекта и присваивать их переменным. В этом случае const [key, value] означает, что вместо назначения [key, value] массив для element мы назначаем первый элемент этого массива key и второй элемент value, Это эквивалентно этому:
for (const element of Object.entries(obj)) {
const key = element[0]
,value = element[1]
}
Как видите, деструктуризация делает это намного проще.
Array.prototype.every() а также Array.prototype.some()
every() метод возвращает true если указанная функция обратного вызова возвращает true для каждого элемента массива. some() метод возвращает true если указанная функция обратного вызова возвращает true для некоторого (хотя бы одного) элемента.
const arr = [1, 2, 3]
// true, because every element is greater than 0
console.log(arr.every(x => x > 0))
// false, because 3^2 is greater than 5
console.log(arr.every(x => Math.pow(x, 2) < 5))
// true, because 2 is even (the remainder from dividing by 2 is 0)
console.log(arr.some(x => x % 2 === 0))
// false, because none of the elements is equal to 5
console.log(arr.some(x => x === 5))Array.prototype.find() а также Array.prototype.filter()
find() методы возвращают первый элемент, который удовлетворяет предоставленной функции обратного вызова. filter() Метод возвращает массив всех элементов, который удовлетворяет предоставленной функции обратного вызова.
const arr = [1, 2, 3]
// 2, because 2^2 !== 2
console.log(arr.find(x => x !== Math.pow(x, 2)))
// 1, because it's the first element
console.log(arr.find(x => true))
// undefined, because none of the elements equals 7
console.log(arr.find(x => x === 7))
// [2, 3], because these elements are greater than 1
console.log(arr.filter(x => x > 1))
// [1, 2, 3], because the function returns true for all elements
console.log(arr.filter(x => true))
// [], because none of the elements equals neither 6 nor 7
console.log(arr.filter(x => x === 6 || x === 7))Array.prototype.map()
map() Метод возвращает массив с результатами вызова предоставленной функции обратного вызова для элементов массива.
const arr = [1, 2, 3]
console.log(arr.map(x => x + 1)) // [2, 3, 4]
console.log(arr.map(x => String.fromCharCode(96 + x))) // ['a', 'b', 'c']
console.log(arr.map(x => x)) // [1, 2, 3] (no-op)
console.log(arr.map(x => Math.pow(x, 2))) // [1, 4, 9]
console.log(arr.map(String)) // ['1', '2', '3']Array.prototype.reduce()
reduce() Метод сводит массив к одному значению, вызывая предоставленную функцию обратного вызова с двумя элементами.
const arr = [1, 2, 3]
// Sum of array elements.
console.log(arr.reduce((a, b) => a + b)) // 6
// The largest number in the array.
console.log(arr.reduce((a, b) => a > b ? a : b)) // 3reduce() Метод принимает необязательный второй параметр, который является начальным значением. Это полезно, когда массив, на котором вы вызываете reduce() может иметь ноль или один элемент. Например, если мы хотим создать функцию sum() который принимает массив в качестве аргумента и возвращает сумму всех элементов, мы могли бы написать его так:
const sum = arr => arr.reduce((a, b) => a + b, 0)
console.log(sum([])) // 0
console.log(sum([4])) // 4
console.log(sum([2, 5])) // 7Если вы пытаетесь получить доступ к item из примера структуры id или же nameбез знания его положения в массиве проще всего было бы использовать библиотеку http://underscorejs.org/:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
_.find(data.items, function(item) {
return item.id === 2;
});
// Object {id: 2, name: "bar"}
Из моего опыта, используя функции более высокого порядка вместо for или же for..in зацикливание приводит к коду, который легче рассуждать, и, следовательно, более легко обслуживаемый.
Просто мои 2 цента.
Иногда доступ к вложенному объекту с использованием строки может быть желательным. Простой подход - это, например, первый уровень
var obj = { hello: "world" };
var key = "hello";
alert(obj[key]);//world
Но это часто не так со сложным JSON. Поскольку json становится все более сложным, подходы для нахождения значений внутри json также становятся сложными. Рекурсивный подход для навигации по json лучше, и то, как эта рекурсия будет использоваться, будет зависеть от типа данных, которые ищутся. Если есть условные операторы, поиск json может быть хорошим инструментом для использования.
Если доступ к свойству уже известен, но путь сложен, например, в этом объекте
var obj = {
arr: [
{ id: 1, name: "larry" },
{ id: 2, name: "curly" },
{ id: 3, name: "moe" }
]
};
И вы знаете, что хотите получить первый результат массива в объекте, возможно, вы хотели бы использовать
var moe = obj["arr[0].name"];
Однако это вызовет исключение, поскольку у объекта с таким именем нет свойства. Решение, чтобы иметь возможность использовать это было бы, чтобы сгладить аспект дерева объекта. Это можно сделать рекурсивно.
function flatten(obj){
var root = {};
(function tree(obj, index){
var suffix = toString.call(obj) == "[object Array]" ? "]" : "";
for(var key in obj){
if(!obj.hasOwnProperty(key))continue;
root[index+key+suffix] = obj[key];
if( toString.call(obj[key]) == "[object Array]" )tree(obj[key],index+key+suffix+"[");
if( toString.call(obj[key]) == "[object Object]" )tree(obj[key],index+key+suffix+".");
}
})(obj,"");
return root;
}
Теперь сложный объект можно сплющить
var obj = previous definition;
var flat = flatten(obj);
var moe = flat["arr[0].name"];//moe
Вот jsFiddle Demo этого подхода используется.
Чтобы получить доступ к вложенному атрибуту, необходимо указать его имя, а затем выполнить поиск по объекту.
Если вы уже знаете точный путь, вы можете жестко закодировать его в своем скрипте следующим образом:
data['items'][1]['name']
это тоже работает -
data.items[1].name
data['items'][1].name
data.items[1]['name']
Если вы не знаете точного имени заранее, или пользователь предоставляет вам имя. Затем требуется динамический поиск по структуре данных. Некоторые предположили, что поиск может быть выполнен с использованием for цикл, но есть очень простой способ пройти путь, используя Array.reduce,
const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }
const path = [ 'items', '1', 'name']
let result = path.reduce((a,v) => a[v], data)
Путь это способ сказать: сначала возьмите объект с ключом items, который оказывается массивом. Затем возьмите 1 первый элемент (0 индексных массивов). Последний взять объект с ключом name в этом элементе массива, который оказывается строкой bar,
Если у вас очень длинный путь, вы можете даже использовать String.split чтобы сделать все это проще -
'items.1.name'.split('.').reduce((a,v) => a[v], data)
Это просто обычный JavaScript, без использования сторонних библиотек, таких как jQuery или lodash.
Вот 4 разных метода, упомянутых для получения свойства объекта:
Это простое объяснение:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
/*
1. `data` is object contain `item` object*/
console.log(data);
/*
2. `item` object contain array of two objects as elements*/
console.log(data.items);
/*
3. you need 2nd element of array - the `1` from `[0, 1]`*/
console.log(data.items[1]);
/*
4. and you need value of `name` property of 2nd object-element of array)*/
console.log(data.items[1].name);Вы могли бы использовать lodash _get функция:
var object = { 'a': [{ 'b': { 'c': 3 } }] };
_.get(object, 'a[0].b.c');
// => 3
Этот вопрос довольно старый, так как современное обновление. С началом ES2015 есть альтернативы, чтобы получить данные, которые вам нужны. Теперь существует функция, называемая деструктуризацией объектов, для доступа к вложенным объектам.
const data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
const {
items: [, {
name: secondName
}]
} = data;
console.log(secondName);В приведенном выше примере создается переменная с именем secondName от name ключ из массива под названием items, одиночка , говорит пропустить первый объект в массиве.
Примечательно, что в этом примере это, вероятно, излишне, так как простой доступ к массиву легче читать, но он полезен при разбивании объектов в целом.
Это очень краткое введение в ваш конкретный вариант использования, деструктуризация может быть необычным синтаксисом, к которому нужно сначала привыкнуть. Я бы порекомендовал прочитать документацию Mozilla's Destructuring Assignment чтобы узнать больше.
var ourStorage = {
"desk": {
"drawer": "stapler"
},
"cabinet": {
"top drawer": {
"folder1": "a file",
"folder2": "secrets"
},
"bottom drawer": "soda"
}
};
ourStorage.cabinet["top drawer"].folder2; // Outputs -> "secrets"
или же
//parent.subParent.subsubParent["almost there"]["final property"]
В основном, используйте точку между каждым потомком, который разворачивается под ним, и когда у вас есть имена объектов, состоящие из двух строк, вы должны использовать нотацию ["obj Name"]. В противном случае достаточно точки;
добавим, что доступ к вложенным массивам будет происходить так:
var ourPets = [
{
animalType: "cat",
names: [
"Meowzer",
"Fluffy",
"Kit-Cat"
]
},
{
animalType: "dog",
names: [
"Spot",
"Bowser",
"Frankie"
]
}
];
ourPets[0].names[1]; // Outputs "Fluffy"
ourPets[1].names[0]; // Outputs "Spot"
На всякий случай, если кто-нибудь посетит этот вопрос в 2017 году или позже и ищет легкий для запоминания способ, вот подробный пост в блоге о доступе к вложенным объектам в JavaScript без обмана со стороны
Невозможно прочитать свойство 'foo' с неопределенной ошибкой
1. Шаблон доступа к вложенным объектам Оливера Стила
Самый простой и чистый способ - использовать шаблон доступа к вложенным объектам Оливера Стила.
const name = ((user || {}).personalInfo || {}).name;
С этим обозначением вы никогда не столкнетесь с
Не удается прочитать свойство 'имя' из неопределенного.
Вы в основном проверяете, существует ли пользователь, если нет, вы создаете пустой объект на лету. Таким образом, ключ следующего уровня будет всегда доступен из существующего объекта или пустого объекта, но никогда из неопределенного.
2. Доступ к вложенным объектам с помощью Array Reduce
Чтобы иметь доступ к вложенным массивам, вы можете написать свой собственный массив execute.
const getNestedObject = (nestedObj, pathArr) => {
return pathArr.reduce((obj, key) =>
(obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}
// pass in your object structure as array elements
const name = getNestedObject(user, ['personalInfo', 'name']);
// to access nested array, just pass in array index as an element the path array.
const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);
// this will return the city from the first address item.
Существует также превосходная обработка типов минимальной библиотеки типов, которая сделает все это за вас.
Доступ к динамически многоуровневому объекту.
var obj = {
name: "salut",
subobj: {
subsubobj: {
names: "I am sub sub obj"
}
}
};
var level = "subobj.subsubobj.names";
level = level.split(".");
var currentObjState = obj;
for (var i = 0; i < level.length; i++) {
currentObjState = currentObjState[level[i]];
}
console.log(currentObjState);
Рабочая скрипка: https://jsfiddle.net/andreitodorut/3mws3kjL/
Использование JSONPath будет одним из наиболее гибких решений, если вы захотите включить библиотеку: https://github.com/s3u/JSONPath (узел и браузер)
Для вашего случая использования путь json будет:
$..items[1].name
так:
var secondName = jsonPath.eval(data, "$..items[1].name");
Я предпочитаю JQuery. Это чище и легко читается.
$.each($.parseJSON(data), function (key, value) {
alert(value.<propertyname>);
});Если вы ищете один или несколько объектов, которые соответствуют определенным критериям, у вас есть несколько вариантов, используя query-js
//will return all elements with an id larger than 1
data.items.where(function(e){return e.id > 1;});
//will return the first element with an id larger than 1
data.items.first(function(e){return e.id > 1;});
//will return the first element with an id larger than 1
//or the second argument if non are found
data.items.first(function(e){return e.id > 1;},{id:-1,name:""});
Там также есть single и singleOrDefault они работают так же, как first а также firstOrDefault соответственно. Разница лишь в том, что они будут бросать, если найдено более одного совпадения.
для дальнейшего объяснения query-js вы можете начать с этого поста
Старый вопрос, но как никто не упомянул lodash (только подчеркивание).
Если вы уже используете lodash в своем проекте, я думаю, элегантный способ сделать это в сложном примере:
Опция 1
_.get(response, ['output', 'fund', 'data', '0', 'children', '0', 'group', 'myValue'], '')
такой же как:
Опция 2
response.output.fund.data[0].children[0].group.myValue
Разница между первым и вторым вариантом заключается в том, что в параметре 1, если у вас отсутствует одно (не определено) свойство в пути, вы не получите ошибку, он возвращает вам третий параметр.
Для фильтра массива lodash имеет _.find() но я бы лучше использовал обычный filter(), Но я все еще думаю вышеупомянутый метод _.get() очень полезно при работе с действительно сложными данными. В прошлом я сталкивался с действительно сложными API, и это было удобно!
Я надеюсь, что это может быть полезно для тех, кто ищет варианты для манипулирования действительно сложными данными, которые подразумевает заголовок.
Подчеркнуть JS Way
Это библиотека JavaScript, которая предоставляет целый ряд полезных functional programming помощники без расширения каких-либо встроенных объектов.
Решение:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
var item = _.findWhere(data.items, {
id: 2
});
if (!_.isUndefined(item)) {
console.log('NAME =>', item.name);
}
//using find -
var item = _.find(data.items, function(item) {
return item.id === 2;
});
if (!_.isUndefined(item)) {
console.log('NAME =>', item.name);
}
В 2020 году вы можете использовать @babel/plugin-offer-optional-chaining, это очень легко получить доступ к вложенным значениям в объекте.
const obj = {
foo: {
bar: {
baz: class {
},
},
},
};
const baz = new obj?.foo?.bar?.baz(); // baz instance
const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined
https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining
Я не думаю, что спрашивающий касается только вложенного объекта одного уровня, поэтому я представляю следующую демонстрацию, чтобы продемонстрировать, как получить доступ к узлу глубоко вложенного объекта json. Хорошо, давайте найдем узел с идентификатором '5'.
var data = {
code: 42,
items: [{
id: 1,
name: 'aaa',
items: [{
id: 3,
name: 'ccc'
}, {
id: 4,
name: 'ddd'
}]
}, {
id: 2,
name: 'bbb',
items: [{
id: 5,
name: 'eee'
}, {
id: 6,
name: 'fff'
}]
}]
};
var jsonloop = new JSONLoop(data, 'id', 'items');
jsonloop.findNodeById(data, 5, function(err, node) {
if (err) {
document.write(err);
} else {
document.write(JSON.stringify(node, null, 2));
}
});<script src="https://rawgit.com/dabeng/JSON-Loop/master/JSONLoop.js"></script>Динамический подход
Ниже deep(data,key) функция, вы можете использовать произвольные key строка - в вашем случае items[1].name (вы можете использовать обозначение массива [i] на любом уровне) - если ключ недействителен, возвращается undefined.
let deep = (o,k) => k.split('.').reduce((a,c,i) => {
let m=c.match(/(.*?)\[(\d*)\]/);
if(m && a!=null && a[m[1]]!=null) return a[m[1]][+m[2]];
return a==null ? a: a[c];
},o);
// TEST
let key = 'items[1].name' // arbitrary deep-key
let data = {
code: 42,
items: [{ id: 11, name: 'foo'}, { id: 22, name: 'bar'},]
};
console.log( key,'=', deep(data,key) );вот как я это сделал.
let groups = [
{
id:1,
title:"Group 1",
members:[
{
id:1,
name:"Aftab",
battry:'10%'
},
{
id:2,
name:"Jamal",
},
{
id:3,
name:"Hamid",
},
{
id:4,
name:"Aqeel",
},
]
},
{
id:2,
title:"Group 2",
members:[
{
id:1,
name:"Aftab",
battry:'10%'
},
{
id:2,
name:"Jamal",
battry:'10%'
},
{
id:3,
name:"Hamid",
},
]
},
{
id:3,
title:"Group 3",
members:[
{
id:1,
name:"Aftab",
battry:'10%'
},
{
id:3,
name:"Hamid",
},
{
id:4,
name:"Aqeel",
},
]
}
]
groups.map((item) => {
// if(item.id == 2){
item.members.map((element) => {
if(element.id == 1){
element.battry="20%"
}
})
//}
})
groups.forEach((item) => {
item.members.forEach((item) => {
console.log(item)
})
})
Вы можете использовать синтаксис jsonObject.keyчтобы получить доступ к значению. И если вы хотите получить доступ к значению из массива, вы можете использовать синтаксисjsonObjectArray[index].key.
Вот примеры кода для доступа к различным значениям, чтобы дать вам представление.
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
// if you want 'bar'
console.log(data.items[1].name);
// if you want array of item names
console.log(data.items.map(x => x.name));
// get the id of the item where name = 'bar'
console.log(data.items.filter(x => (x.name == "bar") ? x.id : null)[0].id);Функция grep в jQuery позволяет фильтровать массив:
var data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
$.grep(data.items, function(item) {
if (item.id === 2) {
console.log(item.id); //console id of item
console.log(item.name); //console name of item
console.log(item); //console item object
return item; //returns item object
}
});
// Object {id: 2, name: "bar"}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Если вы пытаетесь найти путь в строке JSON, вы можете сбросить свои данные на https://jsonpathfinder.com и щелкнуть элементы графического интерфейса. Он сгенерирует JS-синтаксис для пути к элементу.
Помимо этого, для любых массивов, которые вы можете захотеть выполнить итерацию, замените соответствующие индексы смещения массива, например
[0] с петлей.
Вот более простая версия инструмента, которую вы можете запустить здесь. Щелкните узел, путь к которому вы хотите скопировать в буфер обмена.
Это не означает, что вы но, если вы научитесь научитесь ловить рыбу,ловить рыбу, сэкономите время.
// const path = 'info.value[0].item'
// const obj = { info: { value: [ { item: 'it works!' } ], randominfo: 3 } }
// getValue(path, obj)
export const getValue = ( path , obj) => {
const newPath = path.replace(/\]/g, "")
const arrayPath = newPath.split(/[\[\.]+/) || newPath;
const final = arrayPath.reduce( (obj, k) => obj ? obj[k] : obj, obj)
return final;
}
Примечание. В этом ответе предполагается, что мы ищем элемент, в котором
id = 2
Рассмотрите возможность использования объектного сканирования, если вам требуется более сложная обработка данных. Это очень мощно, если осмыслить его. Для вашего примера вы можете использовать следующее:
const objectScan = require('object-scan');
const find = (id, data) => objectScan(['items[*].id'], {
abort: true,
rtn: 'parent',
filterFn: ({ value }) => value === id
})(data);
const data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
console.log(find(2, data));
// => { id: 2, name: 'bar' }
то, что вам нужно сделать, очень просто, и это может быть достигнуто с помощью рекурсии:
const json_object = {
"item1":{
"name": "apple",
"value": 2,
},
"item2":{
"name": "pear",
"value": 4,
},
"item3":{
"name": "mango",
"value": 3,
"prices": {
"1": "9$",
"2": "59$",
"3": "1$"
}
}
}
function walkJson(json_object){
for(obj in json_object){
if(typeof json_object[obj] === 'string'){
console.log(`${obj}=>${json_object[obj]}`);
}else{
console.log(`${obj}=>${json_object[obj]}`);
walkJson(json_object[obj]);
}
}
}
walkJson(json_object);
Питонический, рекурсивный и функциональный подход для раскрытия произвольных деревьев JSON:
handlers = {
list: iterate,
dict: delve,
str: emit_li,
float: emit_li,
}
def emit_li(stuff, strong=False):
emission = '<li><strong>%s</strong></li>' if strong else '<li>%s</li>'
print(emission % stuff)
def iterate(a_list):
print('<ul>')
map(unravel, a_list)
print('</ul>')
def delve(a_dict):
print('<ul>')
for key, value in a_dict.items():
emit_li(key, strong=True)
unravel(value)
print('</ul>')
def unravel(structure):
h = handlers[type(structure)]
return h(structure)
unravel(data)
где данные - это список Python (анализируется из текстовой строки JSON):
data = [
{'data': {'customKey1': 'customValue1',
'customKey2': {'customSubKey1': {'customSubSubKey1': 'keyvalue'}}},
'geometry': {'location': {'lat': 37.3860517, 'lng': -122.0838511},
'viewport': {'northeast': {'lat': 37.4508789,
'lng': -122.0446721},
'southwest': {'lat': 37.3567599,
'lng': -122.1178619}}},
'name': 'Mountain View',
'scope': 'GOOGLE',
'types': ['locality', 'political']}
]
Использование lodash было бы хорошим решением
Пример:
var object = { 'a': { 'b': { 'c': 3 } } };
_.get(object, 'a.b.c');
// => 3