how to destructure an array of objects in JavaScript

Question

I have an object "data" from 'https://randomuser.me/api/' which I'm using in my project.

{
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "miss",
        "first": "mia",
        "last": "sutton"
      }
    }
  ]
}

I destructured results from the data object as follows; const {results} = data; How do I destructure the results variable I created, and obtain the first item from it I want the de-structured array item to be declared as profile. This represents the profile data for the user gotten from the API call that I want to display in my app.

const {results: [{name: {title, first, last}}]} = data; This will completly destructure the first item on your list. — Seblor
– Seblor, Commented Mar 14, 2019 at 10:05
Thank you. How about if I want to give the first item in the array a name. For example myArray. So when I log myArray, I should get; ` { "gender": "female", "name": { "title": "miss", "first": "mia", "last": "sutton" }` — Gm Emmy
– Gm Emmy, Commented Mar 14, 2019 at 10:10
@Gm Emmy, this my answer below, I give an example of how to destructure the first item in the array, and go deeper if you need to — jo_va
– jo_va, Commented Mar 14, 2019 at 10:11
@GmEmmy Jo_va gave some examples for destructuring your object. If you just want to have your first element in an variable, simply use const {results: [firstPerson]} = data; — Seblor
– Seblor, Commented Mar 14, 2019 at 10:13
@Seblor Does the firstPerson represent the array item's new variable name? — Gm Emmy
– Gm Emmy, Commented Mar 14, 2019 at 10:20

jo_va · Accepted Answer · 2019-03-14 23:19:37Z

8

You can do it like this:

const { results: [firstItem] } = data;

See this MDN article for more info on destructuring.

const data = {
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "miss",
        "first": "mia",
        "last": "sutton"
      }
    }
  ]
};

// declare a const variable named firstItem that holds the first element of the array
const { results: [firstItem] } = data;
// You could event destructure the content of this first array item like this
const { results: [{ gender, name }] } = data;
// or go deeper like this
const { results: [{ name: { title, first, last } }] } = data;

console.log(firstItem);
console.log(gender);
console.log(name);
console.log(title, first, last);

According to your code (see comments), this should work too:

const data = {
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "miss",
        "first": "mia",
        "last": "sutton"
      }
    }
  ]
};

const displayUserPhotoAndName = (data) => {
  if(!data) return;
  const { results } = data;
  const { results: [profile] } = data;

  console.log(profile);
}

displayUserPhotoAndName(data);

edited Mar 14, 2019 at 23:19

answered Mar 14, 2019 at 10:05

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

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

4 Comments

jo_va Over a year ago

@Gm Emmy, is this example working for you ? const { results: [firstItem] } = data;

Gm Emmy Over a year ago

No it's not unfortunately.

Gm Emmy Over a year ago

` const displayUserPhotoAndName = (data) => { if(!data) return; const {results} = data; const {results: [profile]} = data;}` I'm doing it inside a function that receives data as it's parameter.

jo_va Over a year ago

@Gm Emmy, your error must be somewhere else, there is nothing wrong with that code. I updated the answer and added a snippet with your code and it works

Collectives™ on Stack Overflow

how to destructure an array of objects in JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related