-3

I have function called displayUserDetail with a an api object passed as a parameter called userData from this API — https://randomuser.me/api.

Here's an example API response (trimmed down):

{
  "results": [
    {
      "gender": "male",
      "name": {
        "title": "mr",
        "first": "peter",
        "last": "morris"
      },
      "location": {
        "street": "4330 avondale ave",
        "city": "mackay",
        "state": "tasmania",
        "postcode": 4247,
        "coordinates": {
          "latitude": "-79.8202",
          "longitude": "-177.8268"
        },
        "timezone": {
          "offset": "+7:00",
          "description": "Bangkok, Hanoi, Jakarta"
        }
      },
      "email": "peter.morris@example.com",
      "login": {
        "uuid": "cad308a3-5d94-4269-872b-d0a473c4a269",
        "username": "blackpeacock867",
        "password": "josephin",
        "salt": "x2MrizMY",
        "md5": "8a5298049f819b7ffab05853b6480c8c",
        "sha1": "7dde7e2aa7e7b3efdbec903fccf7f61d53c6c6dd",
        "sha256": "aac87211a73f52df4b54932ee9a4deaabd51c703249f762b8e518f121eeb7b86"
      },
      "dob": {
        "date": "1947-01-10T18:33:20Z",
        "age": 72
      },
      "registered": {
        "date": "2012-12-14T12:51:06Z",
        "age": 6
      },
      "phone": "04-2726-1355",
      "cell": "0407-597-184",
      "id": {
        "name": "TFN",
        "value": "280671361"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/men/26.jpg",
        "medium": "https://randomuser.me/api/portraits/med/men/26.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/men/26.jpg"
      },
      "nat": "AU"
    }
  ],
  "info": {
    "seed": "26dbd13d59ab09ca",
    "results": 1,
    "page": 1,
    "version": "1.2"
  }
}

From this, I'm required to get username and picture from this api using destructuring.

const displayUserDetail = (userData) => {
  if (!userData) return;
  // ???
}

How do I, using destructing, create a statement to obtain the username and picture from the API response?

p.s.w.g
  • 146,324
  • 30
  • 291
  • 331
Yemi Esuga
  • 1
  • 3
  • 2
    1)Your question is unclear 2)`!user data` will throw error. 3) give example object – Maheer Ali Mar 13 '19 at 06:38
  • 2
    I have no idea. What is `userData` supposed to be here? What is "an api object"? You'll need to describe the data that you expect. (BTW, destructuring is just another way of describing what you expect an object/array to look like) – p.s.w.g Mar 13 '19 at 06:39
  • Typo, should be (!userData) – Yemi Esuga Mar 13 '19 at 06:40
  • `const { displayUserDetail } = userData;` ?? – Jonas Wilms Mar 13 '19 at 06:41
  • @p.s.w.g the expected data is from an api call https://randomiser.me/api/ – Yemi Esuga Mar 13 '19 at 06:42
  • *"create a statement that restructures the userData parameter and obtain the api object property"*. Don't destructure in the parameter. Inside the function, do `const { api } = userData`. Now you have both `userData` and `api` – adiga Mar 13 '19 at 06:45
  • @YemiEsuga That link doesn't work for me, but in any case, you should [edit](https://stackoverflow.com/posts/55135787/edit) your question to include the description of what `userData` *actually* looks like as well as exactly what properties you need to pull out of it or how you want to restructure it. – p.s.w.g Mar 13 '19 at 06:46
  • Possible duplicate of [ES6 destructuring function parameter - naming root object](https://stackoverflow.com/questions/29051011/es6-destructuring-function-parameter-naming-root-object) and [Destructuring assignment in function call while preserving the object](https://stackoverflow.com/questions/45145876) – adiga Mar 13 '19 at 06:46
  • @p.s.w.g this has been reworded. Api URL Required to get name and picture from the api using destructing. – Yemi Esuga Mar 13 '19 at 07:08
  • @YemiEsuga I've taken the liberty of adding an example result and trying to clarify your question. This is the result I get from that API, but if you're calling it with different parameters and getting a different structure as a result, please make sure the question matches the *actual* result object you need to work with. – p.s.w.g Mar 13 '19 at 12:48

1 Answers1

1

You can use destructuring like so:

const displayUserDetail = (userData) => {
  const {
    login: username
  } = userData
  const {
    picture
  } = userData
  console.log(username)
  console.log(picture)
}

let data = {
  "results": [{
    "gender": "male",
    "name": {
      "title": "mr",
      "first": "peter",
      "last": "morris"
    },
    "location": {
      "street": "4330 avondale ave",
      "city": "mackay",
      "state": "tasmania",
      "postcode": 4247,
      "coordinates": {
        "latitude": "-79.8202",
        "longitude": "-177.8268"
      },
      "timezone": {
        "offset": "+7:00",
        "description": "Bangkok, Hanoi, Jakarta"
      }
    },
    "email": "peter.morris@example.com",
    "login": {
      "uuid": "cad308a3-5d94-4269-872b-d0a473c4a269",
      "username": "blackpeacock867",
      "password": "josephin",
      "salt": "x2MrizMY",
      "md5": "8a5298049f819b7ffab05853b6480c8c",
      "sha1": "7dde7e2aa7e7b3efdbec903fccf7f61d53c6c6dd",
      "sha256": "aac87211a73f52df4b54932ee9a4deaabd51c703249f762b8e518f121eeb7b86"
    },
    "dob": {
      "date": "1947-01-10T18:33:20Z",
      "age": 72
    },
    "registered": {
      "date": "2012-12-14T12:51:06Z",
      "age": 6
    },
    "phone": "04-2726-1355",
    "cell": "0407-597-184",
    "id": {
      "name": "TFN",
      "value": "280671361"
    },
    "picture": {
      "large": "https://randomuser.me/api/portraits/men/26.jpg",
      "medium": "https://randomuser.me/api/portraits/med/men/26.jpg",
      "thumbnail": "https://randomuser.me/api/portraits/thumb/men/26.jpg"
    },
    "nat": "AU"
  }],
  "info": {
    "seed": "26dbd13d59ab09ca",
    "results": 1,
    "page": 1,
    "version": "1.2"
  }
}

data.results.forEach(userData => displayUserDetail(userData));
Talha
  • 807
  • 9
  • 13