Search code examples
javascripthtmlreactjsarraysloops

How can I loop through array of objects and get result in key values form?


I have an array of objects as shown below. this is slightly complex but I will try to explain in simple way as I can. As you can see, each object with name Engineering, Environment and others has its radars object. this radars object has all object in it and it should have p1, p2, p3+ and total in it. if any of these are missing, that means its count is 0. for e.g. with Environment, the p1, and p2 are missing. that means its count is 0 and so on.

let input = [
    {
        "name": "Engineering",
        "radars": {
            "all": {
                "p1": { "count": 4 },
                "p2": { "count": 1 },
                "p3plus": { "count": 2 },
                "total": { "count": 7 }
            },
        }
    },
    {
        "name": "Environment",
        "radars": {
            "all": {
                "p3plus": { "count": 1 },
                "total": { "count": 1 },
            }
        }
    },
    {
        "name": "others",
        "radars": {
            "all": {},
        }
    }
]

Here is what I need to get the output as. I need to create array of objects with keys being P1, P2, P3+ and Total. Basically, I want to iterate the input object and get its radar object. Whatever is the count for p1, p2, p3+ and total, I need to pass them one by one to the result. for e.g. in first object with Engineering, I have p1, p2, p3+ and total as 4, 1, 2, 7. So these values are passed to each of the keys in the output. similarly next set of values are passed.

const output = [
  { "P1": [ 4, 0, 0 ] },
  { "P2": [ 1, 0, 0 ] },
  { "P3+": [ 2, 1, 0] },
  { "Total": [ 7, 1, 0 ] }
]

Can someone let me know how to achieve this. this is slightly complex than the normal looping of array of objects and i was not able to find anything specific to this complexity.


Solution

  • you can create an object in the format of { p1: [4, 0, 0], p2: [1, 0, 0], p3plus: [2, 1, 0], total: [7, 1, 0] } using reduce instead of an array of individual objects. Looping can be done for the keys array and the corresponding value can also then be obtained

    let input = [ { "name": "Engineering", "radars": { "all": { "p1": { "count": 4 }, "p2": { "count": 1 }, "p3plus": { "count": 2 }, "total": { "count": 7 } }, } }, { "name": "Environment", "radars": { "all": { "p3plus": { "count": 1 }, "total": { "count": 1 }, } } }, { "name": "others", "radars": { "all": {}, } } ]
    
    const res = input.reduce((acc,curr,idx) => {
      const radars = Object.keys(curr.radars.all)
      radars.forEach(r => {
        acc[r] = acc[r] || Array(input.length).fill(0)
        acc[r][idx] = curr.radars.all[r].count
      })
      return acc
    },{})
    
    console.log(res)
    console.log(Object.keys(res))

    if needed in the array format can map through the keys

    let input = {
      p1: [4, 0, 0],
      p2: [1, 0, 0],
      p3plus: [2, 1, 0],
      total: [7, 1, 0]
    }
    
    const res = Object.keys(input).map(k => ({[k]:input[k]}))
    
    console.log(res)