score:1

Accepted answer

You can loop through them like this:

{this.state.jData && Object.keys(this.state.jData).map(key => (
  <>
    {this.state.jData[key].map(data => (
      <div className="cell large-3">
        <h3>{data.name}</h3>
      </div>
    ))}
  </>
))}

score:0

You are trying to iterate an object. Hence you cannot directly use "map" as an option. You can try as below to iterate:

var jData = {
  "selva": [{
      "cus_id": "1",
      "name": "selva",
      "loc_name": "chennai",
      "loc_phone": "986478393",
      "loc_email": "selva@gmail.com"
    },
    {
      "cus_id": "1",
      "name": "selva",
      "loc_name": "Trichy",
      "loc_phone": "123456789",
      "loc_email": "surya@gmail.com"
    }
  ],
  "ram": [{
    "cus_id": "3",
    "name": "ram",
    "loc_name": "tnager",
    "loc_phone": "45654345",
    "loc_email": "ram@gmail.com"
  }],
  "Sam": [{
      "cus_id": "4",
      "name": "Sam",
      "loc_name": "chrompet",
      "loc_phone": "234545634",
      "loc_email": "sam@gmail.com"
    },
    {
      "cus_id": "4",
      "name": "Sam",
      "loc_name": "mount",
      "loc_phone": "234545634",
      "loc_email": "sam@gmail.com"
    },
    {
      "cus_id": "4",
      "name": "Sam",
      "loc_name": "adambakkam",
      "loc_phone": "45654345",
      "loc_email": "sam@gmail.com"
    }
  ]
};

Object.keys(jData).map(val => {
  jData[val].map(cusData => {
    //Print your data here
    console.log(cusData['loc_name']);
    console.log(cusData['loc_phone']);
  });
});

This is an idea to iterate your object. But please make sure your json is not too large. Otherwise it'll hit your performance and then you might have to find alternative way to print your data.

score:0

Here you go

export default function DetailTable({data}) {

  return (
      <div className="grid-x small-up-12">
        <BuildDetailTable data={data} />
      </div>
    );
}

const BuildDetailTable = ({ data }) => {
  const result = [];
  for (const [key, value] of Object.entries(data)) {
    result.push(
      <div className="cell">
        <div className="callout">
          <div className="grid-x">
            <div className="cell large-3">
              <h3>{key}</h3>
              <BuildDetailRow data={value} />
            </div>
          </div>
        </div>
      </div>
    );
  }
  return result;
};

const BuildDetailRow = ({ data }) => {
  const result = [];
  for (const item of data) {
    result.push(
      <div className="cell large-9">
        <div className="table-break">
          <div className="grid-x">
            <div className="cell medium-4">
              <div className="grid-x">
                <div className="cell large-12">
                  <span>Name: {item.loc_name}</span>
                </div>
              </div>
            </div>
            <div className="cell medium-3">
              <span>Phone: {item.loc_phone}</span>
            </div>
            <div className="cell medium-3">
              <span>Email: {item.loc_email}</span>
            </div>
            <div className="cell medium-2">
              <input
                type="button"
                className="label label-button float-right"
                value="Edit"
              />
            </div>
          </div>
        </div>
      </div>
    );
  }

  return result;
};

Is you pass the api data to DetailTable component, it will render the desired result

<DetailTable data={data from api}/>

The output I get is:

enter image description here


Related Query

More Query from same tag