How to map array of objects to a table in React?

Question

I have an array of Objects in my MongoDB and I want to map it to a Table in React. I have tried but it is giving undefined in the browser console and it is not mapping. when I console.log the vm it gives the following data:

How can you will help me?

    [
         {
              "Virtual_Machines": {
                   "Debian": {
                        "VM_Name": "Debian",
                        "VM_Location": "eastus",
                        "VM_Disk_Name": "Debian_OsDisk_1_b890f5f5c42647549c881c0706b85201",
                        "VM_Publisher_Info": {
                             "publisher": "debian",
                             "offer": "debian-11",
                             "sku": "11-gen2",
                             "version": "latest"
                        },
                        "Vm_Disk_Type": "Standard_D2s_v3",
                        "VM_Encryption": null
                   },
                   "Ubuntu": {
                        "VM_Name": "Ubuntu",
                        "VM_Location": "eastus",
                        "VM_Disk_Name": "Ubuntu_disk1_0610e0fde49b481490ef0a069a03b460",
                        "VM_Publisher_Info": {
                             "publisher": "canonical",
                             "offer": "0001-com-ubuntu-server-focal",
                             "sku": "20_04-lts-gen2",
                             "version": "latest"
                        },
                        "Vm_Disk_Type": "Standard_D2s_v3",
                        "VM_Encryption": null
                   }
              }
         },]


    <table className="audit table">
                <thead className="table-th">
                  <tr>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Encryption</th>
                  </tr>
                </thead>
                <tbody className="table-body">
                  {vm.map((x) => (
                    <tr>
                      <td>{x.Virtual_Machines}</td>
                      <td>{x.VM_Location}</td>
                      <td>{x.VM_Encryption}</td>
                    </tr>
                  ))}
                </tbody>
              </table>

Ahmet Firat Keler · Accepted Answer · 2022-05-22 19:30:04Z

1

Please change this part like below

vm.map(x => x.Virtual_Machines).map(y => (
  <tr>
    <td>{x.VM_Name}</td>
    <td>{x.VM_Location}</td>
    <td>{x.VM_Encryption}</td>
  </tr>
));

answered May 22, 2022 at 19:30

Ahmet Firat Keler

4,2502 gold badges16 silver badges30 bronze badges

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

Comments

Eskandar Abedini · Accepted Answer · 2022-05-22 19:29:45Z

Your mapping is wrong, you have four levels / nesting in your JSON including Virtual_Machines, machine type, machine attributes and VM_Publisher_Info. You have mixed Virtual_Machines with machine attributes (VM_Location, VM_Encryption) that is wrong.

A similar case is:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
const data = [
  {
    name: "Jude",
    position: "Developer",
    experiences: [
      {
        id: 0,
        job: "React UI Developer",
        period: "2017-2018",
        description:
          "I love Creating beautiful Smart UI with React js and styled components"
      },
      {
        id: 1,
        job: "React/ Redux UI Developer",
        period: "2017-2018",
        description:
          "I love Creating beautiful Smart UI with React js and styled components"
      }
    ]
  }
];

class App extends React.Component {
  state = {
    data: []
  };
  componentDidMount() {
    console.log(data);
    this.setState({ data });
  }
  render() {
    const { data } = this.state;
    const resume = data.map(dataIn => {
      return (
        <div key={dataIn.name}>
          {dataIn.name}
          <ul>
            {dataIn.experiences.map(experience => (
              <li key={experience.id}>{experience.job}</li>
            ))}
          </ul>
          {dataIn.position}
        </div>
      );
    });

    return <div>{<React.Fragment>{resume}</React.Fragment>}</div>;
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

mapping a nested array from json in React js

Collectives™ on Stack Overflow

How to map array of objects to a table in React?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related