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

That's a single object, not an array. Did you mean you have an array of objects like that? — Barmar
– Barmar, Commented Nov 4, 2021 at 16:25
dinner.diners.name is a 2-dimensional array. You need to loop through it. — Barmar
– Barmar, Commented Nov 4, 2021 at 16:27
@Woohaik That won't work either. Notice that each object is inside another array. — Barmar
– Barmar, Commented Nov 4, 2021 at 16:28

0stone0 · Accepted Answer · 2021-11-04 16:31:02Z

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)

answered Nov 4, 2021 at 16:31

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HBMCS Over a year ago

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 Over a year ago

That's fine, I solved with

return obj.person + (obj.slept == 'yes' ? '(s)' : '') + (obj.mentioned == 'yes' ? '(m)' : '') + (obj.cancelled == 'yes' ? '(c)' : '');

Barmar · Accepted Answer · 2021-11-04 16:38:04Z

1

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

edited Nov 4, 2021 at 16:38

answered Nov 4, 2021 at 16:32

Barmar

789k57 gold badges554 silver badges669 bronze badges

3 Comments

HBMCS Over a year ago

I get a number of <empty string> with this.

Barmar Over a year ago

Sorry, d.name should have been d.person

HBMCS Over a year ago

True. Interesting approach. I can I also have the slept etc, as per last part of my question?

Collectives™ on Stack Overflow

Get values from a nested array in JavaScript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related