How to parse elements from nested JSON in javascript?

Question

I have the following json which gets returned as responseText after I send a GET request to a rest api:

{
    "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"
}

I want to fetch only "uid" and "dateCreated" elements from all the "ehrs" elements of this json, and then display them in a proper manner with both attribute name and its value shown. I tried the following code:

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

But it is showing [undefined] ---- [undefined] as output in html. I too have a feeling that my code is wrong but can't figure what to do. How to approach this problem?

Answer 1

after ehrobj = JSON.parse(ehrjson) you obtain an object with a ehrs property that is an array

you can only access the properties uid and dateCreated for individual elements of the array.

So you either (1) can display a single element properties uid and dateCreated

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

or (2) you may get them all concatenated

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

Answer 2

Your json parsing is not the problem here. You have to access each array element of ehrobj.ehrs and cycle them like in this snippet

 // 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

Note that ehrobj.ehrs is an array, so ehrobj.ehrs.uid is not a property of his.

    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"
    }, ... ]

You need to iterate for ehrs array.

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