React JS Display Foreign Key Value from JSON file-CodePudding

I am trying to display list of data from a JSON file that has some kind of relationship between 2 variables inside the file. Here is the JSON file that I use:

"data": [
      {
         "id": 1383,
         "productID": "10002",
         "productName": "Test 2",
         "amount": "1000",
         "customerName" : "abc",
         "status": 1,
         "transactionDate": "2022-08-15 13:14:52",
         "createBy" : "abc",
         "createOn" : "2022-07-10 13:14:52"
      },
    ],
"status": [
        {
            "id" : 0,
            "name" : "SUCCESS"
        },
        {
            "id" : 1,
            "name" : "FAILED"
        }
    ],

I am trying to display the "data" data list while using the "status" name attribute. So instead of displaying the status value (status: 1), the data would display the status name value (status: FAILED/SUCCESS).

The JSON file is in my local project, and I use axios and json server to fetch the data to React. How do I display the status name value?

CodePudding user response：

You need to use Array.find method to get the status name

function getStatus(id, status) {
  const statusDetails = status.find(item=>item.id === id);
  return statusDetails?.name || 'Status not available';
}

Call this function to get status with status value and status array as arguments.