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

console.log

• Barmar: That's a single object, not an array. Did you mean you have an array of objects like that?
• Barmar: dinner.diners.name is a 2-dimensional array. You need to loop through it.
• Woohaik: dinner.diners.name.forEach((name) => name.person)
• Barmar: @Woohaik That won't work either. Notice that each object is inside another array.
• Barmar: Your edit is not an array. An array begins with [ not {

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)

• HBMCS: Thank you @0stone0, excellent. One last question: How can conditionally output (or not) customised strings for the three parameters? Something like return `${obj.person} ${obj.slept} == 'yes') ? '(s)' : '' ${obj.mentioned} == 'yes' ? '(m)' : '' ${obj.cancelled} == 'yes' ? '(c)' : ''`; outputs literal strings.
• HBMCS: That's fine, I solved with return obj.person + (obj.slept == 'yes' ? '(s)' : '') + (obj.mentioned == 'yes' ? '(m)' : '') + (obj.cancelled == 'yes' ? '(c)' : '');

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);
})

• HBMCS: I get a number of <empty string> with this.
• Barmar: Sorry, d.name should have been d.person
• HBMCS: True. Interesting approach. I can I also have the slept etc, as per last part of my question?