Get values from a nested array in JavaScript

Question

Given this array I'm getting from an XHR request:

[
 {
  "dinnerID": "h1799-05-20a",
  "date": "20 May 1799",
  "note": "<note xmlns=\"http://www.tei-c.org/ns/1.0\"/>",
  "diners": {
    "name": [
      [
        {
          "mentioned": null,
          "slept": "no",
          "cancelled": null,
          "person": "Miss Caroline Fox"
        }
      ],
      [
        {
          "mentioned": null,
          "slept": "no",
          "cancelled": null,
          "person": "Lady Lucy Anne FitzGerald"
        }
      ],
      [
        {
          "mentioned": null,
          "slept": "no",
          "cancelled": null,
          "person": "Dr ??? Drew"
        }
      ],
      [
        {
          "mentioned": null,
          "slept": "no",
          "cancelled": null,
          "person": "Lady Elizabeth Vassall-Fox"
        }
      ],
      [
        {
          "mentioned": null,
          "slept": "no",
          "cancelled": null,
          "person": "Lord Richard Vassall-Fox"
        }
      ]
    ]
  }
 }
 {
  "dinnerID": "h1799-05-21a",
  "date": "21 May 1799",

 }
]

how do I get a list of the names ( person ), and also use the other mentioend , slept , and cancelled ?

This:

for (var dinner of result) {
                    
    let diners = dinner.diners.name.person.join(", ")
}

returns a Uncaught TypeError: dinner.diners.name.person is undefined error. I'd like to return something like

Miss Caroline Fox (slept)(mentioned)(cancelled), Lady Lucy Anne FitzGerald (slept)(mentioned)(cancelled) etc.

I'm attaching a screenshot of my console.log(result) .

Answer 1

If we simplefy the data, we'll get something like

{
  "diners": {
    "name": [
      [
        {
          "mentioned": null,
          "slept": "no",
          "cancelled": null,
          "person": "Miss Caroline Fox"
        }
      ],
      ...
  }
}

Here we see that diners is an Object , holding an array on name key. Since each diner is an object, inside an extra array, we'll need to target that aswell.

To get the desire output, use something like;

 const result = {"dinnerID": "h1799-05-20a", "date": "20 May 1799", "note": "<note xmlns=\\"http://www.tei-c.org/ns/1.0\\"/>", "diners": {"name": [[{"mentioned": null, "slept": "no", "cancelled": null, "person": "Miss Caroline Fox"} ], [{"mentioned": null, "slept": "no", "cancelled": null, "person": "Lady Lucy Anne FitzGerald"} ], [{"mentioned": null, "slept": "no", "cancelled": null, "person": "Dr ??? Drew"} ], [{"mentioned": null, "slept": "no", "cancelled": null, "person": "Lady Elizabeth Vassall-Fox"} ], [{"mentioned": null, "slept": "no", "cancelled": null, "person": "Lord Richard Vassall-Fox"} ] ] } }; const res = result.diners.name.map(diner => { let obj = diner[0]; return `${obj.person} (${obj.slept}) (${obj.mentioned}) (${obj.cancelled})`; }); console.log(res.join(' '));

Miss Caroline Fox (no) (null) (null) Lady Lucy Anne FitzGerald (no) (null) (null) Dr ??? Drew (no) (null) (null) Lady Elizabeth Vassall-Fox (no) (null) (null) Lord Richard Vassall-Fox (no) (null) (null)

Answer 2

dinner.diners.name is a 2-dimensional array of object. You can flatten it and then map through that to get all the names.

result.forEach(dinner => {
    let diners = dinner.diners.name.flat().map(d => d.person).join("");
    console.log(diners);
})