React - Loop through multiple nested arrays json object response then update State

Question

I have some data that has the following shape. The schedule data also has other identifying information attached to it, being schedules.included which is an array of arrays. I want to loop through each included array and find it by type element. I'm not entirely sure how to get each included[] by type then update state with data from each array, respectively. Is forEach the correct approach?

const schedules = {
  data: [
    {
      id: "2147483610",
      type: "Schedule"
    }
  ],
  included: [
    {
      id: "21468486",
      type: "Query",
      name: "Query1"
    },
    {
      id: "43573457345",
      type: "DataSource",
      name: "DataSource1"
    }
  ]
};

I then want to update state with whatever data I need.

      getData = () => {
        axios({
          method: "get",
          url: `/endpoint/with/this/data`
        })
          .then(response => {
            console.log(response);
            var obj = schedules.included[i].type;
            obj.forEach(function(type) {
            alert(type.name);
            });
            this.setState({
              schedules: schedules.data,
              //update with name from type Query
            });
          })
          .catch(error => console.log(error.response));
      };

Can you post more data so that we will clear idea of the array of arrays data looks — sridhar
– sridhar, Commented Dec 3, 2018 at 17:21
what do you want to get at the end? { schedules: schedules.data, names: namesArray } or what is the expected shape? — dehumanizer
– dehumanizer, Commented Dec 3, 2018 at 17:35
@sridharreddy In the sample data I posted under included the two example arrays are separated by a comma. — DJ2
– DJ2, Commented Dec 3, 2018 at 17:49
I don't see any array inside included. I see only 2 objects @DJ2. — sridhar
– sridhar, Commented Dec 3, 2018 at 17:52

James · Accepted Answer · 2018-12-03 17:24:19Z

1

If you want to find the name of the element from the included array which has type = Query, and there is only one such element:

var query = schedules.included.find(el => el.type == "Query");
console.log(query.name); // output Query1

If there is more than one query element you could use filter to get all query elements, then loop thru them doing stuff with each one.

var queries = schedules.included.filter(el => el.type == "Query");
queries.forEach(q => console.log(q.name));

answered Dec 3, 2018 at 17:24

James

22.4k5 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DJ2 Over a year ago

My end goal here is to get each included array by their type. So for instance I want to get the name element for both type == Query and type == DataSource and update state with both of these names, so I can then use them in render to display the data to the user.

sridhar · Accepted Answer · 2018-12-03 17:29:31Z

If there is only one element with the type you are looking for then you can use find or if there is more use filter.

const schedules = {
  data: [
    {
      id: "2147483610",
      type: "Schedule"
    }
  ],
  included: [
    {
      id: "21468486",
      type: "Query",
      name: "Query1"
    },
    {
      id: "43573457345",
      type: "DataSource",
      name: "DataSource1"
    }
  ]
};

const typeMatched = schedules.included.find( included => included.type === "Query");

console.log(': ', typeMatched);

const schedulesObj = {
  data: [
    {
      id: "2147483610",
      type: "Schedule"
    }
  ],
  included: [
    {
      id: "21468486",
      type: "Query",
      name: "Query1"
    },
    {
      id: "43573457345",
      type: "DataSource",
      name: "DataSource1"
    },
    {
      id: "21468482",
      type: "Query",
      name: "Query2"
    },
    {
      id: "21468484",
      type: "Query",
      name: "Query3"
    },
  ]
};
const typeMatchedArray = schedulesObj.included.filter( included => included.type === "Query");

console.log('Query Type List: ', typeMatchedArray)

Collectives™ on Stack Overflow

React - Loop through multiple nested arrays json object response then update State

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related