[Solved]-how to loop throgh array of object from axios json respone in react js and set them in div?-Reactjs

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.

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: