React Native API FETCH Different names for each objects

Question

I am connecting a REST api from React Native app. I have Json response with filename objects with different names but all the objects have same variables: filename, message, and display.

Number of objects changes with each request to API (REST), the names of objects in response are different depending on requests. But the variables in each object are same as above.

The information I need from this response is only filename text, but it will be acceptable if I get list of objects so I can read through the messages from errors.

The image shows how my objects look like.

This is my fetch request :

     const getGists = async () => {
    await axios
      .get(`https://api.github.com/gists/public?per_page=30`)
      .then((r) => {
        let n;
        for (n = 0; n < 30; n++) {
          console.log(r.data[n].files.filename);
          // console.log("____________________");
          // console.log(r.data[n].owner.avatar_url);
          // console.log("____________________");
          // console.log(JSON.stringify(r.data[n].files));
        }
      })
      .catch((e) => {
        console.log("ERROR", e);
      });
  };

how is possible to get every filename from these requests even if object name is not the same in each iteration . Thanks for help

the object data is important, so try to remove the image but edit the question and add a valid object, in JSON or unusual object format, your current data is not looking like a proper object for manipulation. — nima
– nima, Commented Oct 30, 2021 at 9:40
Sorry but i dont understand what you want to say ... this object is fetched from github gists. It looks like proper object but the question is how can i get that filename even if i dont know the name of the object around — ConquistaDeJuarez
– ConquistaDeJuarez, Commented Oct 30, 2021 at 9:44
By mistake, i will move FOR inside api, and just read from 0-30.. i just can't get that object filename , — ConquistaDeJuarez
– ConquistaDeJuarez, Commented Oct 30, 2021 at 9:51
Try using JS object functions.yourObject[Object.keys(yourObject)[0]].filename — Ali Wahab
– Ali Wahab, Commented Oct 30, 2021 at 9:52

nima · Accepted Answer · 2021-10-30 12:23:25Z

Working with the result of the API calls and some higher-order functions, this will work fine:

  const getGists = async () => {
    await axios
      .get(`https://api.github.com/gists/public?per_page=30`)
      .then((response) => {
        const myDesireResult = response.data.reduce((acc, item) => {
          const files = Object.values(item.files);

          if (files.length > 1) {
            files.forEach((file) => acc.push(file.filename));
          } else {
            acc.push(files[0].filename);
          }
          return acc;
        }, []);

        console.log(myDesireResult);
      })
      .catch((e) => {
        console.log("ERROR", e);
  });
  };

Explanation:

in the then block, can get the API call result with result.data

with reduce function, looping through the data will start.

since the object in the files has different names, we can get the files with Object.values() easily.

Some of the files contain several items and most of them have just one item. so with checking the length of the file we can do proper action. if the files have more than one element, with another simple lop, we can traverse this file array easily.

Check the working example on codesandbox

Collectives™ on Stack Overflow

React Native API FETCH Different names for each objects

1 Answer 1

Explanation:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Explanation:

Comments

Your Answer

Sign up or log in

Post as a guest

Related