/ Процесса (вложенные) объекты, массивы или JSON

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

data.items[1].name

или

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

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

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

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 этот подход используется.

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

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

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 loop и реструктуризующее присваивание.

for-of loop позволяет выполнять итерацию элемент массива. Синтаксис 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 на элемент массива. The 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() возвращает методов первый элемент, который удовлетворяет предоставленной функции обратного вызова. The 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() can имеет ноль или один элемент. Например, если мы хотим создать функцию 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

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

используя помощью 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>);
});

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

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

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.

если вы ищете один или несколько объектов, отвечающих определенным критериям, у вас есть несколько вариантов использования запрос-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 _get функция:

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

_.get(object, 'a[0].b.c');
// => 3

путь подчеркивания js

который является библиотекой 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);
}

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

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

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

Opt 1

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

то же, что:

Opt 2

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

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

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

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

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

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/

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/

питонический, рекурсивный и функциональный подход к распутыванию произвольных деревьев 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']}
]

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>

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

не удается прочитать свойство " foo " неопределенного

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

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

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

С этой нотацией вы никогда не столкнетесь с

не удается прочитать свойство " имя " неопределенного.

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

2. Доступ К Вложенным Объектам С Помощью Array Reduce

чтобы иметь доступ вложенные массивы, вы можете написать свой собственный массив снизить утиль.

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.

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

использование lodash было бы хорошим решением

Ex:

var object = { 'a': { 'b': { 'c': 3 } } };                                                                                               
_.get(object, 'a.b.c');                                                                                             
// => 3