How to map over object of objects in React using map method?

Question

Hi I am hitting the api endpoint and it return this object

{
  "groupNames": ["terminator", "human"],
  "imgData": {
    "0": {
      "filepath": "0.jpg",
      "group": "terminator",
      "id": "0",
      "isClicked": false,
      "title": "image_0"
    },
    "1": {
      "filepath": "1.jpg",
      "group": "terminator",
      "id": "1",
      "isClicked": false,
      "title": "image_1"
    },
    "2": {
      "filepath": "2.jpg",
      "group": "terminator",
      "id": "2",
      "isClicked": false,
      "title": "image_2"
    }
 }
}

my question is how I can map over imgData object and render every "group" field inside a

tag?

Does this answer your question? [map function for objects (instead of arrays)](https://stackoverflow.com/questions/14810506/map-function-for-objects-instead-of-arrays) — David, Jul 18 '22 at 17:59

Giorgi Moniava · Answer 1 · 2022-07-18T18:47:25.050

Something like this?

import React from 'react';
import './style.css';

let data = {
  groupNames: ['terminator', 'human'],
  imgData: {
    0: {
      filepath: '0.jpg',
      group: 'terminator',
      id: '0',
      isClicked: false,
      title: 'image_0',
    },
    1: {
      filepath: '1.jpg',
      group: 'terminator',
      id: '1',
      isClicked: false,
      title: 'image_1',
    },
    2: {
      filepath: '2.jpg',
      group: 'terminator',
      id: '2',
      isClicked: false,
      title: 'image_2',
    },
  },
};
export default function App() {
  return (
    <div>
      {Object.values(data.imgData).map((x) => (
        <div>{x.group}</div> // add proper keys to these divs in real code
      ))}
    </div>
  );
}

How to map over object of objects in React using map method?

1 Answers1