it-swarm.com.ru

Как я могу получить доступ и обработать вложенные объекты, массивы или JSON?

У меня есть вложенная структура данных, содержащая объекты и массивы. Как я могу извлечь информацию, то есть получить доступ к определенным или множественным значениям (или ключам)?

Например:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

Как я могу получить доступ к name второго элемента в items?

762
Felix Kling

Прелиминарии

JavaScript имеет только один тип данных, который может содержать несколько значений: Object . Массив представляет собой особую форму объекта.

(Обычный) Объекты имеют вид

{key: value, key: value, ...}

Массивы имеют форму

[value, value, ...]

И массивы, и объекты предоставляют структуру key -> value. Ключи в массиве должны быть числовыми, в то время как любая строка может использоваться как ключ в объектах. Пары ключ-значение также называются "свойствами" .

Доступ к свойствам можно получить с помощью точечной нотации

const value = obj.someProperty;

или обозначение в скобках , если имя свойства не будет допустимым JavaScript имя идентификатора [Спецификация] , или имя является значением переменной:

// 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 объясняется в вопросе Разобрать JSON в JavaScript? .

Дальнейшее чтение материала

Доступ к массивам и объектам является фундаментальным знанием JavaScript, и поэтому желательно прочитать MDN JavaScript Guide , особенно разделы



Доступ к вложенным структурам данных

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

Вот пример:

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__. Последнее является внутренним свойством, используемым для цепочки прототипов объекта. Тем не менее, цепочка прототипов и наследование выходят за рамки этого ответа.

1023
Felix Kling

Вы можете получить к нему доступ таким образом

data.items[1].name

или же

data["items"][1]["name"]

Оба пути равны.

65
vitmalina

В случае, если вы пытаетесь получить доступ к item из структуры примера с помощью id или name, не зная его позиции в массиве, самый простой способ сделать это - использовать nderscore.js library:

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 цента.

32
holographic-principle

Иногда доступ к вложенному объекту с использованием строки может быть желательным. Простой подход - это, например, первый уровень

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 этого подхода, который используется.

20
Travis J

Объекты и массивы имеют много встроенных методов, которые могут помочь вам в обработке данных.

Примечание: во многих примерах я использую функции стрелок . Они похожи на функциональные выражения , но они связывают значение 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() с циклом for и назначением деструктурирования

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-of и назначение деструктурирования .

Цикл 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)) // 3

Метод reduce() принимает необязательный второй параметр, который является начальным значением. Это полезно, когда массив, для которого вы вызываете 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
17
Michał Perłakowski

Этот вопрос довольно старый, так как современное обновление. С началом 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 чтобы узнать больше.

11
Alex KeySmith

Чтобы получить доступ к вложенному атрибуту, необходимо указать его имя, а затем выполнить поиск по объекту.

Если вы уже знаете точный путь, вы можете жестко закодировать его в своем скрипте следующим образом:

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.

9
Evgeny

Использование JSONPath будет одним из наиболее гибких решений, если вы захотите включить библиотеку: https://github.com/s3u/JSONPath (узел и браузер)

Для вашего случая использования путь json будет:

$..items[1].name

так:

var secondName = jsonPath.eval(data, "$..items[1].name");
8
Andrejs

Я предпочитаю JQuery. Это чище и легко читается.

 $.each($.parseJSON(data), function (key, value) {
    alert(value.<propertyname>);
});
7
Rudy Hinojosa

Вы можете использовать функцию lodash _get:

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3
7
Sergey
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"]. В противном случае достаточно точки;

Источник: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects

добавим, что доступ к вложенным массивам будет происходить так:

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"

Источник: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays/

Еще один полезный документ, описывающий ситуацию выше: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation

6
Johnny

Если вы ищете один или несколько объектов, которые соответствуют определенным критериям, у вас есть несколько вариантов, используя 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 вы можете начать с этого post

5
Rune FS

Подчеркнуть 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);
}
5
Mohan Dere

Старый вопрос, но как никто не упомянул lodash (только подчеркивание).

Если вы уже используете lodash в своем проекте, я думаю, элегантный способ сделать это в сложном примере:

Опция 1

_.get(response, ['output', 'fund', 'data', '0', 'children', '0', 'group', 'myValue'], '')

такой же как:

Опция 2

response.output.fund.data[0].children[0].group.myValue

Разница между первым и вторым вариантом заключается в том, что в Opt 1, если в пути отсутствует одно из свойств (не определено), вы не получите ошибку, он возвращает вам третий параметр.

Для фильтра массива в lodash есть _.find(), но я бы лучше использовал обычную filter(). Но я все еще думаю, что приведенный выше метод _.get() очень полезен при работе с действительно сложными данными. В прошлом я сталкивался с действительно сложными API, и это было удобно!

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

5
Thiago C. S Ventura

Доступ к динамически многоуровневому объекту.

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/

4
Andrei Todorut

Я не думаю, что спрашивающий касается только вложенного объекта одного уровня, поэтому я представляю следующую демонстрацию, чтобы продемонстрировать, как получить доступ к узлу глубоко вложенного объекта 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>
4
dabeng

На всякий случай, если кто-нибудь посетит этот вопрос в 2017 году или позже и ищет удобный для запоминания способ, вот подробный пост в блоге на Доступ к вложенным объектам в JavaScript без обмана

Невозможно прочитать свойство 'foo' с неопределенной ошибкой

1. Шаблон доступа к вложенным объектам Оливера Стила

Самый простой и чистый способ - использовать шаблон доступа к вложенным объектам Оливера Стила.

const name = ((user || {}).personalInfo || {}).name;

С этим обозначением вы никогда не столкнетесь с

Невозможно прочитать свойство 'name' из undefined .

Вы в основном проверяете, существует ли пользователь, если нет, вы создаете пустой объект на лету. Таким образом, ключ следующего уровня будет всегда доступен из существующего объекта или пустого объекта , но никогда из неопределенного.

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.

Существует также превосходная минимальная библиотека для обработки типов typy , которая сделает все это за вас.

3
Dinesh Pandiyan

Pythonic, рекурсивный и функциональный подход к разгадке произвольных деревьев 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)

где 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']}
]
2
pX0r

jQuery's grep функция позволяет фильтровать массив:

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>
1
user7110739

Мой stringjson происходит из PHP файла, но все же, я указываю здесь, в var. Когда я непосредственно беру свой json в obj, это ничего не показывает, поэтому я помещаю свой файл json как

var obj=JSON.parse(stringjson); так что после этого я получаю message obj и показываю в окне оповещения, затем я получаю data, который является массивом json и хранится в одной переменной ArrObj, затем я читаю первый объект этого массива со значением ключа, как этот ArrObj[0].id

     var stringjson={
        "success": true,
        "message": "working",
        "data": [{
                  "id": 1,
                  "name": "foo"
         }]
      };

                var obj=JSON.parse(stringjson);
                var key = "message";
                alert(obj[key]);
                var keyobj = "data";
                var ArrObj =obj[keyobj];

                alert(ArrObj[0].id);
0
Manthan Patel