Get values from a nested array in JavaScript

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

Answer

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)