Looping over an array of objects and showing values based on static keys defined javascript [duplica-CodePudding

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

CodePudding user response：

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)

CodePudding user response：

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)