Display data in a React component from an object where the keys are different but the values are the same

user_7155557 0
Viewed 77

I have some data that is in JSON format where the keys are different, but the objects nested inside have a keys that are the same (in this case I want a title and a description).

How do I display this data in a React component?

I've seen that you can 'map' through items in an object similar to how you would in an array using Object.keys(objectName).map() however since the keys at the next level are all unique, I'm not sure how to go down to the next level to get to the data I need.

The JSON data I'm working with looks something like this:

const data = {
  dataINeed: {
    firstObject: {
      id: 'one',
      title: 'First title',
      description: 'First description',
    },
    secondObject: {
      id: 'two',
      title: 'Second title',
      description: 'Second description',
    },
    thirdObject: {
      id: 'three',
      title: 'Third title',
      description: 'Third description',
    },
  },
};

And 'mapping' through the data in React looks something like this:

{Object.keys(data.dataINeed).map((data) => {
  return (
    <dl>
      <dt>{data.*.title}</dt>
      <dd>{data.*.description}</dd>
    </dl>
  );
})}

Which obviously doesn't work as I can't use a wildcard selector.

Any suggestions on how to get to that next level of data?

reactjs javascript
4 Answers

where the keys are different but the values are the same

Just use Object.values() directly.

{
  Object.values(data.dataINeed).map((data) => (
    <dl key={data.id}>
      <dt>{data.title}</dt>
      <dd>{data.description}</dd>
    </dl>
  ))
}

SAMPLE JS 

 const a = {
  dataINeed: {
    firstObject: {
      id: 'one',
      title: 'First title',
      description: 'First description',
    },
    secondObject: {
      id: 'two',
      title: 'Second title',
      description: 'Second description',
    },
    thirdObject: {
      id: 'three',
      title: 'Third title',
      description: 'Third description',
    },
  }
}

console.log(Object.values(a.dataINeed))

user_80122060

In your map function you are getting key in each map call (firstObject, secondObject, etc.), so you need to extract your item by that key.

{Object.keys(data.dataINeed).map(key => {
    const item = data.dataINeed[key];
    return (
      <dl>
        <dt>{item.title}</dt>
        <dd>{item.description}</dd>
      </dl>
    );
})}

Here is example.

user_18323300

You might find Object.entries more useful for this than Object.keys, just note that it's ES2017 so you'll need to use the correct transpiler preset. It will return an array for each entry containing the key at index 0 and the object itself at index 1.

So for example: 

Object.entries(dataObject).map([key, value])

will give you

[
    ["firstObject": {...firstObject}],
    ["secondObject": {...secondObject}]
]
user_25797010

Please check out the following snippet and refer Template string is JS

Basically, in your map, you are getting key and hence you need to access the value using that key.

const data = {
  dataINeed: {
    firstObject: {
      id: 'one',
      title: 'First title',
      description: 'First description',
    },
    secondObject: {
      id: 'two',
      title: 'Second title',
      description: 'Second description',
    },
    thirdObject: {
      id: 'three',
      title: 'Third title',
      description: 'Third description',
    },
  },
};


const value = Object.keys(data.dataINeed).map((item) => {
  const myData = data.dataINeed[item];
  return (
    `<dl >
      <
      dt > {
        ${myData.title}
      } < /dt> <
      dd > {
        ${myData.description}
      } < /dd>
      </dl>`
  );
})

console.log(value)

user_91281450
Related