CODEWITHSUNDEEP
javascriptreactjs
user8306074
user8306074

Reputation: 395

how to loop through data and assign values to state array in react

I have a class component and its state contains a filterItems[] blank array. I need to populate the values inside the filterItems array

So, I have a data coming from API which looks something like this: 

0:
emp_code: "a001"
company_code: "company_a"
keys: ["id", "post" ] 
dtypes: ["str", "int"]

1:
emp_code: "b001"
company_code: "company_b"
keys: ["sal", "name" ] 
dtypes: ["int", "str"]

//so on for other companies and employees

So, like this I have a few employees. Now I have to loop through this api data and extract the information and store it into another array called "filters" and pass it to a function.

My filter array should look something like this:

filters: [
        {
          key_name: "id",
          company_code: "company_a",
          input_type: "text",
          dtype: "str"
        },
        {
          key_name: "post",
          company_code: "company_a",
          input_type: "text",
          dtype: "int"
        },
//... keys for other company
]

essentially, I need to do the following in react

for each emp_code
  for each company_code
     for each key:
         keys[i]== filters.key_name
         company_code== filters.company_code
//...so on

The catch here is that, each company has a set of keys so if the employee belongs to the same company then I dont need to add again to the filter array. So, I basically need to check unique company_code and add the different types of keys a company has to the filters array.

Upvotes: 1

Views: 4261

Answers (2)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

If I'm understanding you right, you want to filter your data like this:

Let's say you store your API data in a variable called myArr

Create a new variable called updatedArr that will map over myArr

const updatedArr = myArr.map((company, compIndex, compArr) => {
    return company.keys.map((key, keyIndex, keyArr) => {
        return {
            key_name: key,
            company_code: company.company_code,
            input_type: "text",
            dtype: company.dtypes[keyIndex]
        }
    })
}).reduce((acc, cur) => {
    return [...acc, ...cur]
}, [])

Then parse updatedArr to get the uniqueValues only

let uniqueValues = [];
//parses out duplicates
updatedArr.forEach(function(item) {
  //i will be 0 or more if there already is an item in our array, which means the current item we are iterating over is a duplicate
  var i = uniqueValues.findIndex(
    x => x.dtype == item.dtype && x.company_code == item.company_code
  );
  if (i <= -1) {
    //if item is not yet inside uniqueValues, add it to uniueValues
    uniqueValues.push(item);
  }
});

Then update your componentState with the uniqueValues

this.setState({
   filters: uniqueValues
})

Also created a sandbox to show you this working in-action: https://codesandbox.io/s/rendering-companies-ibs7g

Upvotes: 1

sachin kalekar
sachin kalekar

Reputation: 536

Assuming your data is a array.

    let filters = [];

    data.forEach(item => {
        item.keys.forEach(key => {
            item.dtypes.forEach(dtype => {
                const filter = {
                    key_name: key,
                    company_code: item.company_code,
                    input_type: "text",
                    dtype: dtype
                };
                filters.push(filter)
            })
        })
    });

Upvotes: 0

Related Questions