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

JavaScript

Harry逆天Eva

2020-03-10

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

例如:

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

如何访问name中的第二项items

第464篇《如何访问和处理嵌套对象,数组或JSON?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
前端猿 2020.03.10

My stringjson is coming from PHP file but still, I indicate here in var. When i directly take my json into obj it will nothing show thats why i put my json file as

var obj=JSON.parse(stringjson); so after that i get message obj and show in alert box then I get data which is json array and store in one varible ArrObj then i read first object of that array with key value like this 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);
十三西里GO 2020.03.10

In 2020, you can use @babel/plugin-proposal-optional-chaining it is very easy to access nested values in an object.

 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

https://github.com/tc39/proposal-optional-chaining

Gil启人 2020.03.10

如果您正在寻找一个或多个满足特定条件的对象,则可以使用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的进一步解释,你可以用这个启动

村村伽罗Mandy 2020.03.10

动态访问多级对象。

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/

伽罗达蒙 2020.03.10

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

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

$..items[1].name

所以:

var secondName = jsonPath.eval(data, "$..items[1].name");
小卤蛋卡卡西A 2020.03.10

我更喜欢JQuery。它更干净且易于阅读。

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

前端SamTom 2020.03.10
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

村村樱 2020.03.10

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

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

马克 2020.03.10

您可以这样访问

data.items[1].name

要么

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

两种方法是平等的。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android