how to map api responce in react js-CodePudding

i am trying to do a map funtion in react js but i dont know how to can some one help

what i have tryed

{data.map((personData, key) => {
           return (
             <>
     <table>
       <thead>
         <tr className="background-grey black">
           <th>Id.</th>
           <th>Name</th>
           <th>Join Date</th>
           <th>Total Visit </th>
           <th>Purchased Items</th>
           <th>Total Spend</th>
         </tr>
       </thead>
       <tbody>
               <tr>
                 <td>{personData[0]} </td>
                 <td> {personData[1]}</td>
                 <td>{personData[2]}</td>
                 <td>
                  {personData[3]}
                 </td>
                 <td>$490.51</td>
               </tr>
             </>
           );
         })}

when i do console.log data i get this responce i dont know how to map it beaace it is not a orderd list (array)

Symbol,Name,Sector,Validtill
HEXAWARE,Hexaware Technologies Ltd.,Information Technology,2022-12-29 06:47:34
DRREDDY,Dr. Reddy's Laboratories Ltd.,Pharma,2022-12-29 06:47:34
OIL,Oil India Ltd.,Energy,2022-12-29 06:47:34
AMBUJACEM,Ambuja Cements Ltd.,Cement & Cement Products,2022-12-29 06:47:34
APOLLOTYRE,Apollo Tyres Ltd.,Automobile,2022-12-29 06:47:34
BRITANNIA,Britannia Industries Ltd.,Consumer Goods,2022-12-29 06:47:34
GRASIM,Grasim Industries Ltd.,Cement & Cement Products,2022-12-29 06:47:34
NBCC,NBCC (India) Ltd.,Construction,2022-12-29 06:47:34
OBEROIRLTY,Oberoi Realty Limited,,2022-12-29 06:47:34
HAVELLS,Havells India Ltd.,Consumer Goods,2022-12-29 06:47:34
IFCI,IFCI Ltd.,Financial Services,2022-12-29 06:47:34
RPOWER,Reliance Power Ltd.,Energy,2022-12-29 06:47:34
TATACOMM,TATA COMMUNICATIONS,Telecom,2022-12-29 06:47:34
DABUR,Dabur India Ltd.,Consumer Goods,2022-12-29 06:47:34
GODREJCP,Godrej Consumer Products Ltd.,Consumer Goods,2022-12-29 06:47:34
KSCL,Kaveri Seed Company Ltd.,Consumer Goods,2022-12-29 06:47:34
RELINFRA,Reliance Infrastructure Ltd.,Energy,2022-12-29 06:47:34
ZEEL,Zee Entertainment Enterprises Ltd.,Media & Entertainment,2022-12-29 06:47:34
COALINDIA,Coal India Ltd.,Metals,2022-12-29 06:47:34
LICHSGFIN,LIC Housing Finance Ltd.,Financial Services,2022-12-29 06:47:34

[![enter image description here][1]][1]

CodePudding user response：

I don't know how to fetch your data, but i think you should convert it first:

import { useState, useEffect } from 'React'

function YourComponent() {
  const [items, setItems] = useState([])

  useEffect(() => {
    fetch('https://test.com/data')
      .then((res) => res.json())
      .then((resJson) => {
        const data = JSON.parse(resJson)
        setItems(data)
    })
  }, [])

  return  (<table>{
    items.map((item) => <tr>
                 <td>{item.Symbol} </td>
                 <td>{item.Name}</td>
               </tr>)
  }</table>)
}

CodePudding user response：

What you currently doing is map an array and return whole Table and showing it for each item of your array.

Assuming that you have a table and you want the array to be mapped inside and showing it, you should've wrote it like this

<table>
        <thead>
          <tr className="background-grey black">
            <th>Id.</th>
            <th>Name</th>
            <th>Join Date</th>
            <th>Total Visit </th>
            <th>Purchased Items</th>
            <th>Total Spend</th>
          </tr>
        </thead>
        <tbody>
          {data.map((personData, key) => (
            <tr>
              <td>{personData[0]} </td>  ==> // replace this with your attribute
              <td> {personData[1]}</td>
              <td>{personData[2]}</td>
              <td>{personData[3]}</td>
              <td>$490.51</td>
            </tr>
          ))}
        </tbody>
      </table>

That should do the trick.