如何将 JSON 响应分解为表格？

Question

I am creating a functional component am fetching some data from an internal API and am wondering how I can make destructure the table rows into something a little less verbose. The following is the response I am getting from this API.

{
  "data": [
    {
      "id": "cc134653-c463-4e79-8b9e-f52dfe02498e",
        "type": "bottle",
          "attributes": {
            "name": "Luc Belaire Rare Luxe",
            "price": "$29.99",
            "image": "https://cdn11.bigcommerce.com/s- 
 7a906/images/stencil/1000x1000/products/10929/10518/Luc-Belaire-Rare-Luxe__73902.1555086630.jpg?c=2",
            "sku": "813497005010",
            "size": "750ML",
            "origination": "France",
            "varietal": "Sparkling Wine"
          }
    },
}

I am setting the state of the component like this.

const [bottles, setBottles] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/api/v1/bottles?', { method: "GET" })
      .then(response => response.json())
      .then(data => setBottles(data.data));
  });

This is how I am creating a table body in my component but am wondering if there is a better way to use the bottle.attributes.name and other attributes to make it more like {name} . How can I achieve this?

<tbody>
    {bottles.map(bottle =>
        <tr key={bottle.id}>
            <td><img src={bottle.attributes.image} alt={bottle.attributes.name} height={150} width={100}/></td>
            <td>{bottle.attributes.name}</td>
            <td>{bottle.attributes.sku}</td>
            <td>{bottle.attributes.price}</td>
            <td>{bottle.attributes.size}</td>
            <td>{bottle.attributes.origination}</td>
            <td>{bottle.attributes.varietal}</td>
        </tr>
     )}
</tbody>

Answer 1

It will have to be a bit repetitive regardless - if you destructure the argument, you'll have to list out each individual property in the argument list:

   {bottles.map(({ id, attributes: { image, name, sku, price, size, origination, varietal }}) =>
        <tr key={id}>
            <td><img src={image} alt={name} height={150} width={100}/></td>
            <td>{name}</td>
            <td>{sku}</td>

I'd prefer to just destructure to get the attributes , and then list attributes.name , etc:

<tbody>
    {bottles.map(({ id, attributes }) =>
        <tr key={id}>
            <td><img src={attributes.image} alt={attributes.name} height={150} width={100}/></td>
            <td>{attributes.name}</td>
            <td>{attributes.sku}</td>

which is better than going through bottle each time.

Answer 2

You could make an array of the property names and use an inner map()

const attrs =['name', 'sku', 'price', 'size', 'origination', 'varietal']

<tbody>
    {bottles.map(bottle =>
        <tr key={bottle.id}>
            <td><img src={bottle.attributes.image} alt={bottle.attributes.name} height={150} width={100}/></td>
            {attrs.map(k =>  <td>{bottle.attributes[k]}</td>}           
        </tr>
     )}
</tbody>