Utilizing JavaScript to iterate through objects retrieved via Ajax calls

Question

Utilizing JavaScript to iterate through objects retrieved via Ajax calls

Recently, I've been diving into the world of Javascript and delving deep into AJAX. Utilizing Vanilla JS along with simple AJAX, my current task involves fetching a user object from a URL based on the user's input ID. Despite attempting to use .data, I am encountering issues getting it to function properly.

async function display() {
  try {
    let id = +userID.value;
    const url = `https://jsonplaceholder.typicode.com/users/${id}`;
    const response = await fetch(url);
    const rootObject = await response.json();
    const users = rootObject.data;
    getUser(users);
  } catch (err) {
    alert(err.message);
  }
}

display()

Within my code lies another function - getUsers(users), which remains empty due to its malfunctioning state. How can I successfully retrieve the desired object solely from the provided URL?

javascript ajax

Answer 1

Answer №1

The JSON response does not contain a data property. To access the data, simply parse the JSON and pass it as an argument to the getUser function.

function getUser(data) {
  for (const prop in data) {
    console.log(`${prop}: ${data[prop]}`);
  }
}

async function display(id) {
  try {
    const url = `https://jsonplaceholder.typicode.com/users/${id}`;
    const response = await fetch(url);
    const data = await response.json();
    getUser(data);
  } catch (err) {
    console.error(err.message);
  }
}

display(3);

Answer 2

The JSON response does not contain a data property. To access the data, simply parse the JSON and pass it as an argument to the getUser function.

function getUser(data) {
  for (const prop in data) {
    console.log(`${prop}: ${data[prop]}`);
  }
}

async function display(id) {
  try {
    const url = `https://jsonplaceholder.typicode.com/users/${id}`;
    const response = await fetch(url);
    const data = await response.json();
    getUser(data);
  } catch (err) {
    console.error(err.message);
  }
}

display(3);

Utilizing JavaScript to iterate through objects retrieved via Ajax calls

Answer №1

Similar questions

Styling sub-table titles in jQuery jTable with proper indentation

Issue with FullPage.js scrollOverflow feature not properly accommodating loaded content

Transforming the NavBar in React: A guide to dynamically updating values

Developing several sliders and ensuring they operate independently of each other

Applying a class to an element in VueJS is not functioning as expected

Leveraging this jQuery code across multiple div elements

Animating toasts in Bootstrap

Animation issue in Material UI autocomplete label feature

Using jQuery to bind the "CTRL+A" key combination to exclusively selecting a specific region

Issue: Exceeding rendering limit. React has a restriction on the number of renders to avoid endless loops

Tips for targeting a specific div element within a webview using code in Android app development

Angular2 bootstrapping of multiple components

How to fetch file size using AJAX request

Crafty Checkbox Selector [ leveraging jquery ]

Using jQuery to verify the existence of a lengthy object

How can labels be added when mapping over JSON data?

What is the reason for requiring this to be passed as an Array instead of a String?

Comparing Dates in Node.js using JavaScript and Sorting Arrays based on Date Values

Determine the HTTP status code for a request using Vue.js and Ajax

Delete any classes that start with a specific prefix