簡體   English   中英

如何訪問嵌套的 JSON 數據

[英]How to access nested JSON data

假設我有 json 數據,例如

data = {"id":1,
        "name":"abc",
        "address": {"streetName":"cde",
                    "streetId":2
                    }
        }

現在我正在從這個 json 數據中訪問字段,例如: fields = ["id", "name", "address.streetName"]

如何以最有效的方式從給定的 json 數據訪問第三個字段( address.streetName )? data.fields[2]不起作用

一種可能性是我使用 for 循環構造data[address][streetName]字符串並對其進行評估,但是有沒有有效的方法來做到這一點?

老實說,我無法理解你的問題。 JSON 已經結構化了,為什么還要改結構呢?

在你的情況下,我會按如下方式訪問它:

data.address.streetName;

如果有任何機會,您想要遍歷數據,則需要:

function traverse_it(obj){
    for(var prop in obj){
        if(typeof obj[prop]=='object'){
            // object
            traverse_it(obj[prop[i]]);
        }else{
            // something else
            alert('The value of '+prop+' is '+obj[prop]+'.');
        }
    }
}

traverse_it(data);

更新

閱讀下文后,該用戶的需求似乎更加明顯。 給定屬性名稱作為字符串,他/她想要訪問該對象。

function findProp(obj, prop, defval){
    if (typeof defval == 'undefined') defval = null;
    prop = prop.split('.');
    for (var i = 0; i < prop.length; i++) {
        if(typeof obj[prop[i]] == 'undefined')
            return defval;
        obj = obj[prop[i]];
    }
    return obj;
}

var data = {"id":1,"name":"abc","address":{"streetName":"cde","streetId":2}};
var props = 'address.streetName';
alert('The value of ' + props + ' is ' + findProp(data, props));

如果您使用lodash (一個非常流行的實用程序庫),您可以使用_.get()

例如

var data = {
  "id":1,
  "name": "abc",
  "address": {
    "streetName": "cde",
    "streetId":2
  }
}
_.get(data, 'address.streetName');
// 'cde'
_.get(data, ['address', 'streetName']);
// 'cde'

如果它涉及一個數組,你也可以使用像'address[0].streetName'這樣'address[0].streetName'字符串路徑。

例如

var data = {
  "id":1,
  "name": "abc",
  "addresses": [
    {
      "streetName": "cde",
      "streetId": 2
    },
    {
      "streetName": "xyz",
      "streetId": 102
    },
  ]
}
_.get(data, 'addresses[0].streetName');
// cde
_.get(data, [address, 1, streetName]);
// xyz

在內部,它使用toPath()函數將字符串路徑(例如address.streetName )轉換為數組(例如['address', 'streetName'] ),然后使用函數訪問對象內給定路徑處的數據.

其他類似的實用函數包括_.set()_.has() 去看一下。

長話短說,您可以使用數組符號object[property]而不是object.property 當鍵包含特殊字符時,這特別有用:

var data = {
    "id": 1,
    "name": "abc",
    "address": {
        "streetName": "cde",
        "streetId": 2
    }
}

data.address.streetName;              // (1) dot notation
data["address"]["streetName"];        // (2) array notation
var field = "streetName";
data["address"][field];               // (3) variable inside array notation
var fields = "address.streetName".split(".");
data[fields[0]][fields[1]];           // (4) specific to your question

您可以使用typeof運算符在使用之前檢查屬性是否存在:

typeof data["address"]["streetName"]; // returns "string"
typeof data["address"]["foobarblah"]; // returns "undefined"

您的data變量沒有fields屬性,這就是data.fields[2]不起作用的原因。 我認為你正在嘗試做的是data[fields[2]] ,它適用於一個簡單的對象,但你不能像那樣索引到一個復雜的對象。

您可以通過這種方式訪問​​它data.address.streetName

JavaScript:

function getProperty(json, path) {
    var tokens = path.split(".");
    var obj = json;
    for (var i = 0; i < tokens.length; i++) {
        obj = obj[tokens[i]];
    }
    return obj;
}

var data = {
    id: 1,
    name: "abc",
    address: {
        streetName: "cde",
        streetId: 2
    }
};

var fields = ["id", "name", "address.streetName"];

for (var i = 0; i < fields.length; i++) {
    var value = getProperty(data, fields[i]);
    console.log(fields[i] + "=" + value);
}

輸出:

id=1
name=abc
address.streetName=cde

這是我用來在嵌套對象中查找數據的函數:

Object.prototype.find = function() {
  try {
    return Array.prototype.slice.call(arguments).reduce(function(acc, key) {
      return acc[key]
    }, this)
  }
  catch(e) {
    return 
  }
}

數據結構:

data = {
  "id":1,
  "name":"abc",
  "address": {
    "streetName":"cde",
    "streetId":2
  }
}

函數調用:

data.find("address","streetName")

返回:

"cde"

我是這樣做的:

var data = {
    "id": 1,
    "name": "abc",
    "addresses": [{
        "streetName": "cde",
        "streetId": 2
    }, {
        "streetName": "xyz",
        "streetId": 102
    }, ]
}

data2 = data["addresses"]
for (let i in data2) {
    console.log(data2[i]["streetName"]);
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM