Блог

Мне нужна помощь при рендеринге данных из файла JSON. Ну, в файле JSON есть несколько записей, и для этого я использую функцию map . Я успешно получаю данные из атрибутов заголовка, но внутри каждой записи снова есть массив / вложенные элементы, и когда я пытаюсь это отобразить, я получаю сообщение об ошибке TypeError: Cannot read property 'map' of undefined . Я попытался просто отобразить вложенные массивы в каждой записи отдельно, но все еще не работает. Вот мой код ниже.

    import React, { Component } from "react";
import "../src/css/custom.css";
import data from "../src/data/Items.json";

class PenItems extends Component {

  render() {

    if (!data) {
      return <h1>Loading....</h1>
    }

    return (

      <div className="container">
        <table className="table table-responsive">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Status</th>
              <th scope="col">Requester</th>
              <th scope="col">Reason / State</th>
            </tr>
          </thead>
          <tbody>
            {data.map((record, index) => (
              <tr key={record.index}>
                
                <td>{record.UniqueName}</td>
                <td>{record.StatusString}</td>
                <td>{record.Requester.UniqueName}</td>

                 // the below code is generating an error which is another array inside each record.
                {data.ApprovalRequests.map((record, index) => (
                  <td key={record.index}>{record.Reason} - {record.State}</td>
                ))}

              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default PenItems;
  

Вот пример JSON.

    {
    "Records": [
     //Record 1
        
{
    "StatusString": "Submitted",
    "UniqueName": "IT2566",
    "ApprovalRequests": [  // second loop
        {
            "State": 1,
            "Reason": "Needed For office",
            "Approver": [ // third loop
                {
                    "UniqueName": "xyz"
                },
                {
                    "UniqueName": "xyz"
                },
                {
                    "UniqueName": "xyz"
                }
            ]
        },
        {
            "State": 1,
            "Reason": "Official Requirement",
            "Approver": {
                "UniqueName": "Jhon"
            }
        }
    ]
},
           // Record 2
            {
                "Requester": {
                    "UniqueName": "985521"
                },
                "StatusString": "Submitted",
                "UniqueName": "IT2566",
                "ApprovalRequests": [
                    {
                        "State": 1,
                        "Reason": "Needed For office",
                        "Approver": {
                            "UniqueName": "Daisy Wang"
                        }
                    },
                    {
                        "State": 1,
                        "Reason": "Official Requirement",
                        "Approver": {
                            "UniqueName": "Jhon"
                        }
                    }
                ]
            }
        ]
    }
  

Спасибо всем.

Вы должны выполнить цикл record , чтобы получить ApprovalRequests

   <tbody>
    {data.map((record, index) => (
      <tr key={record.index}>

        <td>{record.UniqueName}</td>
        <td>{record.StatusString}</td>
        <td>{record.Requester.UniqueName}</td>

       // the below code is generating an error which is another array inside each record.
       {record.ApprovalRequests.map((approvalRequest, index) => (
         <td key={approvalRequest.index}>{approvalRequest.Reason} - {approvalRequest.State}</td>
       ))}

       </tr>
     ))}
  </tbody>