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