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) — David
– David, Commented Jul 18, 2022 at 17:59

gmoniava · Accepted Answer · 2022-07-18 18:47:25Z

1

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>
  );
}

edited Jul 18, 2022 at 18:47

answered Jul 18, 2022 at 17:57

gmoniava

28.9k9 gold badges61 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related