Attempting to fetch JSON data within a function using the Fetch API, in order to utilize the information in a separate function

Question

Attempting to fetch JSON data within a function using the Fetch API, in order to utilize the information in a separate function

Looking to extract information from a URL that contains JSON data for multiple objects, I came up with the following code:

static fetchObj(){
fetch("http://localhost:1337/objects")
.then(callback => { 
return callback.json();
})
.then(data => {
console.log(data);
});
}

This allows me to successfully retrieve and output the necessary information.

Next, I need to utilize this data in another function that searches for specific objects based on their ID:

static fetchObjById(id) {
      MyClass.fetchObj()
      .then(
          for(var i=0; i<data.id.length; i++){
            if(data[i].id == id)
              console.log("found");
            else
              console.log("not found");
          }
   }

However, despite attempting various methods, I have been unable to make it work. Any help or advice would be greatly appreciated!

javascript json ecmascript-6 promise fetch-api

Answer 1

Answer №1

One method to locate the identification number is shown here.

var id = 4;
function retrieveObjectById(data) {
    console.log(data);
    for(var i = 0; i < data.length; i++){
        if(data[i].id === id) {
            console.log('located');
            break;
        }
    }
}

var myData;
fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => myData = data)
  .then(() => retrieveObjectById(myData));

Answer 2

One method to locate the identification number is shown here.

var id = 4;
function retrieveObjectById(data) {
    console.log(data);
    for(var i = 0; i < data.length; i++){
        if(data[i].id === id) {
            console.log('located');
            break;
        }
    }
}

var myData;
fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => myData = data)
  .then(() => retrieveObjectById(myData));

Answer 3

Answer №2

then() requires a function as its argument. By using an arrow function, you can easily access the data from the Promise's result.

I suggest moving away from explicit for loops and exploring declarative programming instead. Similar to then(), utilizing forEach() on an array allows you to work with each element using an arrow function, making your code more readable.

In addition, you can streamline the console.log call by first defining the message to be printed based on a condition (using a ternary operator), and then logging that message just once using console.log.

const fetchObjById = (id) => {
  MyClass.fetchObj()
    .then(data => {
        data.forEach(d => {
          const message = d.id === id
            ? 'found'
            : 'not found';
          console.log(message);
        })
      }
}

Answer 4

then() requires a function as its argument. By using an arrow function, you can easily access the data from the Promise's result.

I suggest moving away from explicit for loops and exploring declarative programming instead. Similar to then(), utilizing forEach() on an array allows you to work with each element using an arrow function, making your code more readable.

In addition, you can streamline the console.log call by first defining the message to be printed based on a condition (using a ternary operator), and then logging that message just once using console.log.

const fetchObjById = (id) => {
  MyClass.fetchObj()
    .then(data => {
        data.forEach(d => {
          const message = d.id === id
            ? 'found'
            : 'not found';
          console.log(message);
        })
      }
}

Attempting to fetch JSON data within a function using the Fetch API, in order to utilize the information in a separate function

Answer №1

Answer №2

Similar questions

What is the process of converting an android checkbox selection into a string and then inserting it into a database?

Optimizing the display of multiple list items using Javascript for two separate UL elements on a single webpage

What is the best way to draw a rectangle outline in Vue.js without the need for any additional packages?

Even after being removed, the input field in Firefox stubbornly maintains a red border

What is the best method for dividing strings in javascript?

Utilize PHP to open a JSON string file and then convert it into an array

Error in sending data to the server via the specified URL: "Http failure response for http://localhost/post.php: 0 Unknown Error" and POST request to http://localhost/post.php failed with error code

Ensure that input field is validated only upon clicking the save button in Angular framework

Error encountered while using Jquery's .each() method on a DOM element and attempting to

Ingest JSON child elements using Logstash, structure them appropriately, and load them into Elasticsearch

ReactJS Scripts are throwing an error indicating that the function require is not defined

Using Python to transform API response data into a Power BI table

Having trouble with ng build optimization error in Angular?

Generating a dropdown selection list using data from a JSON file

Make sure a div is displayed on top of any content currently in fullscreen mode

Create a roster of individuals who responded to a particular message

Develop a Modal Form using Bootstrap (HTML)

When creating a database for items, which option is more beneficial: using scriptable objects or storing the data in XML

Encountering a build time issue while incorporating Redis into Next.js

Using the GSON Library to parse JSON may result in issues with null checks on Long types