Map an array from a JSON file using modern Javascript and push it on a table-CodePudding

I'm trying to build a table from a JSON file using map in react, I've tried two ways, the first one using map and the second one using a for loop, but I got nothing.

I appreciate an ES6 based solution.

map:

const META =
[
  {
    "name": "CeloPunks Celo Connect Edition #377",
    "image": "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png",
    "edition": 377
  }
];
const Data = META.map(vardata = () => {
  return (
  <div>
      <td>{vardata}</td>
  </div>
  )
});
console.log(Data);

for loop:

const DataAll = [];
for (let i=0; i<=META.lenght; i  ){
  DataAll.push(META[i]);
};
console.log(DataAll);

How to create a table from a JSON file like META using modern javascript?

CodePudding user response：

For iterating through an array using map method, you should pass map a callback function. In the snippet you send, you defined an expression function where you should have passed a callback to map, so it throws an error and doesn't work as expected. read more on how `map works on MDN.

const META =
[
  {
    "name": "CeloPunks Celo Connect Edition #377",
    "image": "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png",
    "edition": 377
  }
];
const Data = META.map(vardata => {
  return (
    <div>
        <td>{vardata}</td>
    </div>
  )
});
console.log(Data);

CodePudding user response：

you may want something like this :

const Table = () => {
  const META = [
    {
      name: "CeloPunks Celo Connect Edition #377",
      image:
        "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png",
      edition: 377,
    },
  ];

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Image</th>
          <th>Edition</th>
        </tr>
      </thead>
      <tbody>
        {META.map(({ name, image, edition }) => (
          <tr key={name}>
            <td>{name}</td>
            <td>{image}</td>
            <td>{edition}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

This is just a table with one line and a header, but if you change your META variable, it will loop through the array to display each line… For example with this array :

  const META = [
    {
      name: "First Edition #1",
      image: "https://first-link",
      edition: 1,
    },
    {
      name: "Second Edition #2",
      image: "https://second-link",
      edition: 2,
    },
    {
      name: "Third Edition #3",
      image: "https://third-link",
      edition: 3,
    },
  ];

CodePudding user response：

I think you like this below:

const Table = () => {
  const META = [
    {
      name: "CeloPunks Celo Connect Edition #377",
      image:
        "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png",
      edition: 377,
    },
    {
      name: "CeloPunks Celo Connect Edition #378",
      image:
        "https://pbs.twimg.com/profile_images/1440251297538527243/XQLuZvwr_400x400.png",
      edition: 378,
    },
    {
      name: "CeloPunks Celo Connect Edition #379",
      image:
        "https://cdn.cyberbox.art/cpunk/14.png",
      edition: 379,
    },
  ];

  return (
    <table style={{width:'100%'}}>
      <thead>
        <tr>
          <th>Name</th>
          <th>Image</th>
          <th>Edition</th>
        </tr>
      </thead>
      <tbody>
        {META.map(item => (
          <tr key={name}>
            <td>{item.name}</td>
            <td><img src={item.image} /></td>
            <td>{item.edition}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

ReactDOM.render(<Table />, document.getElementById('root'))

img{
 width: 100px;
}

table, th, td {
  border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id='root'></div>