如何解析 javascript 中嵌套的 JSON 中的元素？

Question

我有以下 json 在我向 rest api 发送 GET 请求后作为 responseText 返回：

{
    "ehrs": [
        {
            "uid": "11111111-1111-1111-1111-111111111111",
            "dateCreated": "2017-09-21 04:36:47",
            "subjectUid": "11111111-1111-1111-1111-111111111111",
            "systemId": "CABOLABS_EHR_SERVER",
            "organizationUid": "123456"
        },
        {
            "uid": "22222222-1111-1111-1111-111111111111",
            "dateCreated": "2017-09-21 04:36:47",
            "subjectUid": "22222222-1111-1111-1111-111111111111",
            "systemId": "CABOLABS_EHR_SERVER",
            "organizationUid": "123456"
        },
        {
            "uid": "33333333-1111-1111-1111-111111111111",
            "dateCreated": "2017-09-21 04:36:48",
            "subjectUid": "33333333-1111-1111-1111-111111111111",
            "systemId": "CABOLABS_EHR_SERVER",
            "organizationUid": "123456"
        },
        {
            "uid": "44444444-1111-1111-1111-111111111111",
            "dateCreated": "2017-09-21 04:36:48",
            "subjectUid": "44444444-1111-1111-1111-111111111111",
            "systemId": "CABOLABS_EHR_SERVER",
            "organizationUid": "123456"
        },
        {
            "uid": "55555555-1111-1111-1111-111111111111",
            "dateCreated": "2017-09-21 04:36:48",
            "subjectUid": "55555555-1111-1111-1111-111111111111",
            "systemId": "CABOLABS_EHR_SERVER",
            "organizationUid": "123456"
        },
        {
            "uid": "97fecfa9-d51c-440f-93eb-cb8bbabc5cdc",
            "dateCreated": "2017-09-27 22:53:55",
            "subjectUid": "ef70c3bf-8aba-4f4b-83b7-097f2aff60f6",
            "systemId": "CABOLABS_EHR_SERVER",
            "organizationUid": "123456"
        },
        {
            "uid": "4e363a7c-0b25-405c-93d8-1361f4775ccd",
            "dateCreated": "2017-10-10 06:08:58",
            "subjectUid": "228084fb-10d8-4441-8683-aad526e2c5fd",
            "systemId": "CABOLABS_EHR_SERVER",
            "organizationUid": "123456"
        },
        {
            "uid": "3c6b8a98-1488-427b-8251-5bebad35afda",
            "dateCreated": "2017-10-10 21:03:44",
            "subjectUid": "3dd3a7b1-b642-4e9b-b12a-4fcd10af6e4f",
            "systemId": "CABOLABS_EHR_SERVER",
            "organizationUid": "123456"
        }
    ],
    "pagination": {
        "max": 10,
        "offset": 0,
        "nextOffset": 10,
        "prevOffset": 0
    },
    "timing": "0 ms"
}

我只想从这个 json 的所有 "ehrs" 元素中获取 "uid" 和 "dateCreated" 元素，然后使用这两个属性以适当的方式显示它们名称及其显示的值。我尝试了以下代码：

var ehrjson = (this.responseText);
var ehrobj = JSON.parse(ehrjson);
document.getElementById("ehrlist").innerHTML = ehrobj.ehrs.uid+"    ----     "+ehrobj.ehrs.dateCreated+"\n";

但它在 html 中显示 [undefined] ---- [undefined] 作为输出。我也觉得我的代码是错误的，但不知道该怎么做。如何解决这个问题？

Answer 1

在 ehrobj = JSON.parse(ehrjson) 之后你获得了一个 ehrs 属性的对象，它是一个数组

您只能访问数组的单个元素的属性 uid 和 dateCreated。

所以你要么 (1) 可以显示单个元素属性 uid 和 dateCreated

ehrobj.ehrs[0].uid+" "+ehrobj.ehrs[0].dateCreated

或 (2) 您可以将它们全部串联起来

ehrobj.ehrs.map(e => e.uid + " " + e.dateCreated).join("\n")

Answer 2

您的 json 解析不是这里的问题。您必须访问 ehrobj.ehrs 的每个数组元素并像此代码段中那样循环它们

// ehrobj as js-object to get this snippet running
var ehrobj = {
  "ehrs": [
   {
    "uid": "11111111-1111-1111-1111-111111111111",
    "dateCreated": "2017-09-21 04:36:47",
    "subjectUid": "11111111-1111-1111-1111-111111111111",
    "systemId": "CABOLABS_EHR_SERVER",
    "organizationUid": "123456"
   },
   {
    "uid": "22222222-1111-1111-1111-111111111111",
    "dateCreated": "2017-09-21 04:36:47",
    "subjectUid": "22222222-1111-1111-1111-111111111111",
    "systemId": "CABOLABS_EHR_SERVER",
    "organizationUid": "123456"
   },
   {
    "uid": "33333333-1111-1111-1111-111111111111",
    "dateCreated": "2017-09-21 04:36:48",
    "subjectUid": "33333333-1111-1111-1111-111111111111",
    "systemId": "CABOLABS_EHR_SERVER",
    "organizationUid": "123456"
   },
   {
    "uid": "44444444-1111-1111-1111-111111111111",
    "dateCreated": "2017-09-21 04:36:48",
    "subjectUid": "44444444-1111-1111-1111-111111111111",
    "systemId": "CABOLABS_EHR_SERVER",
    "organizationUid": "123456"
   },
   {
    "uid": "55555555-1111-1111-1111-111111111111",
    "dateCreated": "2017-09-21 04:36:48",
    "subjectUid": "55555555-1111-1111-1111-111111111111",
    "systemId": "CABOLABS_EHR_SERVER",
    "organizationUid": "123456"
   },
   {
    "uid": "97fecfa9-d51c-440f-93eb-cb8bbabc5cdc",
    "dateCreated": "2017-09-27 22:53:55",
    "subjectUid": "ef70c3bf-8aba-4f4b-83b7-097f2aff60f6",
    "systemId": "CABOLABS_EHR_SERVER",
    "organizationUid": "123456"
   },
   {
    "uid": "4e363a7c-0b25-405c-93d8-1361f4775ccd",
    "dateCreated": "2017-10-10 06:08:58",
    "subjectUid": "228084fb-10d8-4441-8683-aad526e2c5fd",
    "systemId": "CABOLABS_EHR_SERVER",
    "organizationUid": "123456"
   },
   {
    "uid": "3c6b8a98-1488-427b-8251-5bebad35afda",
    "dateCreated": "2017-10-10 21:03:44",
    "subjectUid": "3dd3a7b1-b642-4e9b-b12a-4fcd10af6e4f",
    "systemId": "CABOLABS_EHR_SERVER",
    "organizationUid": "123456"
   }
  ],
  "pagination": {
   "max": 10,
   "offset": 0,
   "nextOffset": 10,
   "prevOffset": 0
  },
  "timing": "0 ms"
 };


 ehrobj.ehrs.forEach(function (ehr) {
  document.getElementById("ehrlist").innerHTML += ehr.uid + "    ----     " + ehr.dateCreated + "\n";
 });

<pre id="ehrlist"></pre>

Answer 3

注意ehrobj.ehrs是数组，所以ehrobj.ehrs.uid不是他的属性

    ehrobj.ehrs === [
    {
        "uid": "11111111-1111-1111-1111-111111111111",
        "dateCreated": "2017-09-21 04:36:47",
        "subjectUid": "11111111-1111-1111-1111-111111111111",
        "systemId": "CABOLABS_EHR_SERVER",
        "organizationUid": "123456"
    }, ... ]

您需要迭代 ehrs 数组。

let ehrlist = document.getElementById( 'ehrlist' );
ehrobj.ehrs.forEach( function(ehr){
   let newEl = document.createElement('div');
   newEl.innerHTML = ehr.uid + ' ------ ' + ehr.dateCreated;
   ehrlist.appendChild( newEl );
} )

如何解析 javascript 中嵌套的 JSON 中的元素？

How to parse elements from nested JSON in javascript?

javascript

jquery

json

xmlhttprequest

jsonparser