Looping over an array of objects and showing values based on static keys defined javascript

Question

I have an array of objects in my javascript which has data like

const data = [
  {
    base: {
      storms: {
        description: "Edíficio 100.000€ | Conteúdo 50.000€ | Franquia 150€",
        included: true,
        __typename: "PackageValue",
      },
      fire: {
        description: "Edíficio 100.000€ | Conteúdo 50.000€ | Sem franquia",
        included: true,
        __typename: "PackageValue",
      },

      solar: {
        description: "5.000€ | Franquia 150€",
        included: true,
        __typename: "PackageValue",
      },

      __typename: "HomeBase",
    },
  },
  {....},
  {.....}
];

containing various objects inside this array,

so in my file i defined some static keys as

export const HOMEPACKAGES = {
  mainInfo : ['base.storms', ///so that when i loop over array above i can use this string to access values for eg - data[i].base.storms
              'base.fire',
              'base.flooding',
              'base.theft'
             ]
}

then in order to show the product to the user i am looping over my array of object

data.map((item,index)=><div>"Some content here"</div>)

now my issue is as soon as i start looping and get my first item from "data" array, how do i grab the value like

item.base.storms?

i tried it like

   data.map((item,index)=>HOMEPACKAGES.mainInfo.map((headerKey,index)=><div>{item.headerKey.included}</div>))   //in order to get item.base.storms.included

but got error

i think item is an object and then "base.storm" is taken as string so thats y i get this issue — Ratnabh Kumar Rai, Sep 27 '21 at 10:51
You can access an ObjectKey with an expression by using `[]` brackets. e.g.: `obj[mainInfo[1]] = obj[base.storms] = obj.base.storms` — D.Schaller, Sep 27 '21 at 10:52
@D.Schaller: No, `obj[mainInfo[1]]` would be `obj["base.storms"]`. A string doesn't normally get "deeper" values like that, using `[]` access. — Cerbrus, Sep 27 '21 at 10:54
if i console item, i see my item is Object { base: {…}} and headerkey is base.storms — Ratnabh Kumar Rai, Sep 27 '21 at 10:55
@Cerbrus Never tried to go deeper, my bad. Usually I don't get in a situation where I would need such a selecting process — D.Schaller, Sep 27 '21 at 10:56

Nitheesh · Accepted Answer · 2021-09-27T11:12:48.107

Use a function as helper which will loop through the data and keys.

Here I'm using getData that till recieve node from data array, aswell as from HOMEPACKAGES.mainInfo array. It will spilt the nodes from HOMEPACKAGES.mainInfo on . and recursively parse the data from data array.

const data = [{
  base: {
    storms: {
      description: "Edíficio 100.000€ | Conteúdo 50.000€ | Franquia 150€",
      included: true,
      __typename: "PackageValue",
    },
    fire: {
      description: "Edíficio 100.000€ | Conteúdo 50.000€ | Sem franquia",
      included: true,
      __typename: "PackageValue",
    },

    solar: {
      description: "5.000€ | Franquia 150€",
      included: true,
      __typename: "PackageValue",
    },

    __typename: "HomeBase",
  },
}];
const HOMEPACKAGES = {
  mainInfo: ['base.storms', ///so that when i loop over array above i can use this string to access values for eg - data[i].base.storms
    'base.fire',
    'base.flooding',
    'base.theft'
  ]
}
function getData(key, item) {
  const keys = key.split('.');
  let respData = item;
  keys.forEach((node) => respData = respData[node]);      
  return respData;
}
const resp = data.map((item,index) => HOMEPACKAGES.mainInfo.map((headerKey,index)=>{
  return getData(headerKey, item)
}))   //in order to get item.base.storms.included  
console.log(resp)

score 0 · Answer 2 · answered Sep 27 '21 at 10:52

0

You have to seperate base.storms and feed in into the object field in order:

const data = [
  {
    base: {
      storms: {
        description: "Edíficio 100.000€ | Conteúdo 50.000€ | Franquia 150€",
        included: true,
        __typename: "PackageValue",
      },
      fire: {
        description: "Edíficio 100.000€ | Conteúdo 50.000€ | Sem franquia",
        included: true,
        __typename: "PackageValue",
      },

      solar: {
        description: "5.000€ | Franquia 150€",
        included: true,
        __typename: "PackageValue",
      },

      __typename: "HomeBase",
    },
  },
];

const statics = {
  mainInfo: [
    'base.storms',
    'base.fire',
    'base.flooding',
    'base.theft'
  ]
}

const storms = data.map(el => {
  const stormsInfo = statics.mainInfo[0].split('.')
  return el[stormsInfo[0]][stormsInfo[1]]
})

console.log(storms)

answered Sep 27 '21 at 10:52

Sinan Yaman

5,714
2
15
35

Okay, but what if the string in `mainInfo` contains 2 or even more periods? – Cerbrus Sep 27 '21 at 10:57
I doubt the object will be so nested that accessing indices 0,1,2 is gonna be unreasonable. Of course there are more general solutions _with a lot more code_, I thought that this will be just enough for OP. – Sinan Yaman Sep 27 '21 at 11:00
A generic getter function really isn't that complex... Nitheesh's answer contains one that's only 4 lines of code. – Cerbrus Sep 27 '21 at 11:02
Sure, it is a good answer :) – Sinan Yaman Sep 27 '21 at 11:03

Looping over an array of objects and showing values based on static keys defined javascript

2 Answers2