React Native API FETCH Different names for each objects-CodePudding

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

CodePudding user response：

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