如何访问和处理嵌套对象,数组或JSON?


874

我有一个包含对象和数组的嵌套数据结构。如何提取信息,即访问特定或多个值(或键)?

例如:

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

如何访问name中的第二项items


22
@Marcel:必须将其读取为“我具有数据嵌套的数据结构 JSON,如何访问特定值?”。知道区别,但是很多人没有,也许正在搜索“ JSON”而不是“对象”。实际上,许多问题的形式为“如何在此JSON中访问X”。我在答案中唯一提到JSON的地方就是我解释它的意思。如果您有如何更好地沟通的建议,我非常高兴。
Felix Kling

Answers:


1159

初赛

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数据类型,即数组和对象(以及如何使用它们)。如何在JavaScript中解析JSON问题中说明了如何解析JSON

进一步阅读材料

如何访问数组和对象是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.logconsole.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...inwith的替代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)的环境中,您还可以使用[MDN]循环,该循环不仅适用于数组,而且适用于任何可迭代的方法for...of

for (const item of data.items) {
   // `item` is the array element, **not** the index
}

在每次迭代中,for...of直接为我们提供了下一个可迭代的元素,没有“索引”可供访问或使用。


如果我不知道数据结构的“深度”怎么办?

除了未知键之外,数据结构的“深度”(即,有多少个嵌套对象)也可能是未知的。如何访问深层嵌套的属性通常取决于确切的数据结构。

但是,如果数据结构包含重复模式,例如二叉树的表示形式,则解决方案通常包括递归 [Wikipedia]访问数据结构的每个级别。

这是获取二叉树的第一个叶子节点的示例:

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);

访问具有未知键和深度的嵌套数据结构的更通用的方法是测试值的类型并采取相应的措施。

这是一个将嵌套数据结构内的所有原始值添加到数组中的示例(假定它不包含任何函数)。如果遇到一个对象(或数组),则只需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;
}



帮手

由于复杂对象或数组的结构不一定很明显,因此我们可以检查每个步骤的值来决定如何进一步移动。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]是一个对象,展开后,我们看到它具有三个属性idname__proto__。后者是用于对象原型链的内部属性。但是,原型链和继承超出了此答案的范围。


3
这里链接的一些内容实际上是在问如何在jQuery中做到这一点,公平地说,在这里简化了1或2件事。不确定是将其做成大型公告还是单独回答-此处涉及的对象的基本知识和数组通常是真正要问的问题...。
克里斯·莫斯基尼

1
@ felix-kling一件事...带有嵌套对象,例如let object = {a: 1, b: 2, c: { a: 3, b: 4 }};,这将返回一个包含每个嵌套对象的数组的数组,在这种情况下[ 1, 2, [ 3, 4 ] ],在递归调用中使用concat而不是push更好吗?(需要结果是可变的)
ElFitz

3
这是我在Stack Overflow上见过的最深入的答案-它回答了我的问题!谢谢!
威廉·琼斯,

这一页让我了解了ARRAY和OBJ之间的区别
4ni5

76

您可以这样访问

data.items[1].name

要么

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

两种方法是平等的。


是的,但是你不能做数据[“ items”]。1.name
neaumusic

5
首先是更直观,更易读和更短的;)我更喜欢仅在属性名称为变量时使用方括号属性语法。
DanteTheSmith

35

如果您尝试item通过id或从示例结构访问一个name,而又不知道它在数组中的位置,最简单的方法是使用underscore.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"}

根据我的经验,使用高阶函数代替forfor..in循环会导致代码更易于推理,因此更易于维护。

只是我的2美分。


29

对象和数组具有许多内置方法,可以帮助您处理数据。

注意:在许多示例中,我都使用了箭头功能。它们类似于函数表达式,但它们以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-for循环销毁分配迭代结果非常方便。

For-of循环可让您迭代数组元素。语法是for (const element of array)(我们可以constvar或替换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则该方法返回。该方法返回,如果指定的回调函数返回对一些(至少一个)元素。truesome()truetrue

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


这是我最喜欢的答案。您还可以添加仅循环特定嵌套数据的示例,例如Object.keys(data["items"]).forEach(function(key) { console.log(data["items"][key].id); console.log(data["items"][key].name); });
SilverSurfer

25

有时,使用字符串访问嵌套对象可能是理想的。例如,简单的方法是第一级

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正在使用的一种方法。


您要使用WTH obj["arr[0].name"]代替obj.arr[0].name吗?除了序列化之外,您几乎不需要/不想处理展平的对象
2014年

@Bergi-我经常看到这个问题,并且由于该问题已得到规范使用,因此我发布了该版本的答案。如果可以避免,则使用obj.arr [0] .name的速度要快得多,但是有时人们想要传递字符串访问器,这就是这样做的一个示例。
特拉维斯J

嗯 尽管如此,几乎没有理由仅使用单个字符串路径来展平整个对象,您可以简单地对其进行解析并进行动态查找。
Bergi 2014年

14

这个问题已经很老了,因此是一个当代更新。随着ES2015的出现,还有一些替代方法可以保留您所需的数据。现在有一个称为对象解构的功能,用于访问嵌套对象。

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

const {
  items: [, {
    name: secondName
  }]
} = data;

console.log(secondName);

上面的示例从名为的数组secondNamename键中创建了一个名为的变量items,孤独的,说跳过该数组中的第一个对象。

值得注意的是,由于简单的数组访问更易于阅读,因此对于本示例来说,这可能是多余的,但通常在拆分对象时很有用。

这是您的特定用例的非常简短的介绍,解构可能是一开始不习惯的语法。我建议阅读Mozilla的Destructuring Assignment文档以了解更多信息。


13

要访问嵌套属性,您需要指定其名称,然后搜索对象。

如果您已经知道确切的路径,则可以在脚本中对其进行硬编码,如下所示:

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)

路径是一种表达方式:首先将带有key的对象items作为数组。然后使用1-st元素(0个索引数组)。最后,将具有key的对象name放入该数组元素中,该元素恰好是string bar

如果您的路途很长,甚至可以使用它String.split来简化所有操作-

'items.1.name'.split('.').reduce((a,v) => a[v], data)

这只是普通的JavaScript,没有使用任何第三方库(如jQuery或lodash)。


13
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

通过点走进行属性访问:https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation


尽管此链接可以回答问题,但最好在此处包括答案的基本部分,并提供链接以供参考。如果链接的页面发生更改,仅链接的答案可能会失效。- 评论
罗伯特

1
我编辑了帖子。尽管人们很快对此做出了不好的表率。下次,我将不给出答案。
约翰尼

1
@Riddick不要犹豫,只要确保你不会只发布一个链接
reggaeguitar

12

您可以使用lodash _get功能:

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

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

9

如果您愿意包含一个库,那么使用JSONPath将是最灵活的解决方案之一:https : //github.com/s3u/JSONPath(节点和浏览器)

对于您的用例,json路径为:

$..items[1].name

所以:

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

1
使用eval()不是一个好的解决方案。而是可以使用头等函数。
pradeep gowda

8

为了以防万一,有人在2017年或以后访问此问题并寻找一种易于记忆的方式,这是一篇有关在JavaScript中访问嵌套对象的精心撰写的博客文章,

无法读取未定义错误的属性“ foo”

1. Oliver Steele的嵌套对象访问模式

最简单最干净的方法是使用Oliver Steele的嵌套对象访问模式

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

有了这个符号,您将永远不会遇到

无法读取undefined的属性“名称”

您基本上检查用户是否存在,如果不存在,则动态创建一个空对象。这样,将始终从存在的对象或空对象访问下一级密钥,而永远不会从未定义的对象访问

2.使用数组归约访问嵌套对象

为了能够访问嵌套数组,您可以编写自己的数组reduce util。

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
这个问题主要是关于存在的访问属性。关于您指的是什么(并且已经包括大多数解决方案),已经存在一个问题:安全地访问Javascript嵌套对象使用string键访问嵌套的JavaScript对象。但是无论如何:“不幸的是,您不能使用此技巧访问嵌套数组。” 为什么不?数组是对象,因此它也应该工作。您能否提供一个没有的示例?
菲利克斯·克林

1
@FelixKling当我们尝试使用Oliver Steele模式访问数组时,我们将无法即时创建长度为'n'的数组并访问nth索引而不会出现'undefined'错误。例如 ((user || {}).address || new Array(3))[1].name
Dinesh Pandiyan

3
您没有一致地应用模式。...[1].bar如果该元素1不存在,当然会导致错误。但是,这也为的情况下....foo.bar,如果foo不存在。您也必须“保护”访问1,就像“保护”任何其他属性访问一样。数组只是一个对象。“数组元素”只是一个属性。正确地应用它将会是(((user || {}).address || {})[1] || {}).name
Felix Kling '18

1
这很棒。并没有这样打我。感谢@FelixKling,我将去更新博客文章。
Dinesh Pandiyan '18

2
@DineshPandiyan,您应该披露您是typy的作者,阅读您的博客文章后我才来到这里
reggaeguitar



6

如果您要寻找一个或多个满足特定条件的对象,可以使用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。唯一的区别是,如果找到多个匹配项,他们将抛出。

查询-JS的进一步解释,你可以用这个启动


我很想知道如何进行改进。愿意发表评论吗?
符文FS

6

The Underscore 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);
}

6

古老的问题,但是没有人提到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()但是我宁愿使用regular filter()。但是我仍然认为上述方法_.get()在处理真正复杂的数据时超级有用。我过去曾经面对过非常复杂的API,这很方便!

我希望这对于谁在寻找操作标题所暗示的真正复杂数据的选项可能有用。


5

我不认为发问者仅关注一个级别的嵌套对象,因此我呈现以下演示以演示如何访问深度嵌套的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>


如何使用变量访问嵌套的json对象。数据= {a:{b:'ss'}}; VAR键= AB数据[键]不工作
Pasupathi Rajamanickam

3

您可以使用语法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);


3

动态方法

在下面的deep(data,key)函数中,可以使用任意key字符串-在这种情况下items[1].name(可以[i]在任何级别使用数组表示法)-如果键无效,则返回undefined。


2

一种解开任意JSON树的pythonic,递归和功能方法:

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']}
]

6
这个问题是关于JavaScript的,而不是Python。不确定Python是否存在等效问题。
菲利克斯·克林

2

jQuery的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>


2
// 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;
}


-4

stringdata来自PHP文件,但仍然在此处指出var。当我直接将json放入obj其中时,不会显示出为什么将json文件作为

var obj=JSON.parse(stringdata); 所以在那之后我得到messageobj并显示在警报框中,然后得到data哪个是json数组并存储在一个变量中,ArrObj然后我用类似这样的键值读取该数组的第一个对象ArrObj[0].id

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

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

                alert(ArrObj[0].id);

2
该示例令人困惑,因为stringjson它不是字符串。
Felix Kling

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.