How can I fetch the specific data/item using JavaScript? [duplicate]

Question

I'm new to JavaScript. I'm trying to do the following could someone help please

Fetch the list of people from the above URL
Print the name of the youngest female

    import "./styles.css";
    
    const url = "https://randomuser.me/api/?results=10&seed=10&inc=name,gender,dob";
    
    
    
    fetch(url)
      .then((response) => {
        return response.json();
      })
      .then((myJson) => {
        console.log(myJson);
      });
    document.getElementById("app").innerHTML = `
    <p>
      Youngest female: 
    </p>
    `;

What is the format of your data? Can't you sort it, for example JavaScript: Sort an array of objects by a numeric property in each object — VLAZ
– VLAZ, Commented May 19, 2021 at 5:50
You need to have document.getElementById("app").innerHTML inside the then callback. Check the duplicate on how to get the object with max DOB property — adiga
– adiga, Commented May 19, 2021 at 5:55
Are you not able to get the list of people from the api call already? I guess you just want to get the youngest person, right? — Wahab Shah
– Wahab Shah, Commented May 19, 2021 at 5:58
@WahabShah Yes, i just want to print the youngest female. Using fetch i did console.log and was able to get the data. BUt i'm not sure about printing it tho — blake
– blake, Commented May 19, 2021 at 6:01

DecPK · Accepted Answer · 2021-05-19 06:17:52Z

You just need to manipulate the data to get the youngest female

First get all females
Get the first female to compare with using array index females[0]
Compare it will all other females and store the result in result
Add text to HTML in the then block itself.

const url = "https://randomuser.me/api/?results=10&seed=10&inc=name,gender,dob";

fetch(url)
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    const arr = myJson.results;
    const females = arr.filter((o) => o.gender === "female");
    let result = females[0];
    console.table(females);
    for (let obj of females) {
      if (obj.dob.age < result.dob.age) {
        result = obj;
      }
    }
    const {
      name: { title, first, last }} = result;
    document.getElementById(
      "app"
    ).innerHTML = `<p>Youngest female: ${title} ${first} ${last}</p>`;
  });

<div id="app"></div>

Collectives™ on Stack Overflow

How can I fetch the specific data/item using JavaScript? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related