Insert value to table from key API with React

veronica novianti 0
Viewed 36

I have trouble when insert table value with react js. So, I have API form like this : const data = [ { tahun: 2015, tindakan_igd: { APS: [2000], Dirawat: [2000], Dirujuk_Luar: [2000], Dirujuk_Poli: [2000], Meninggal_DOA: [2000], Meninggal_IGD: [2000], Pulang: [2000] } } ];

And I want to get the [APS, Dirawat, Dirujuk_Luar, Dirujuk_Poli, Meninggal_DOA, Meninggal_IGD, Pulang] to the first column. Then, I want to put [2000,2000,2000,2000,2000,2000,2000] to the second column.

And this is my React.js code :

 import React, { useEffect, useState } from "react";
// import BreadCrumb from "../ui/components/BreadCrumb";
// import CircularLoader from "../ui/components/Spinner/CircularLoader";
// import DetailHeader from "../ui/components/Headers/DetailHeader";
import { useLocation, useParams } from "react-router-dom";
// import Error404 from "../ui/components/Error404";
// import RegularDropDown from "../ui/components/Dropdown/RegularDropdown";

const DetailPemasukan = () => {
  const location = useLocation();
  // const { labels, crumb, title } = location.state ?? "";
  // const [isLoading, setIsLoading] = useState(true);
  const data = [
      {
        tahun: 2015,
        tindakan_igd: {
          APS: [2000],
          Dirawat: [2000],
          Dirujuk_Luar: [2000],
          Dirujuk_Poli: [2000],
          Meninggal_DOA: [2000],
          Meninggal_IGD: [2000],
          Pulang: [2000]
        }
      }
    ];

  const headers = [
    "Tindakan",
    "Total Pemasukan"
  ];
  
  return (
    <div className="detail__table">
      <table>
        <tr>
        {headers.map((item, index) => (
                      <th key={index}>{item}</th>
                    ))}
        </tr>
        {data.map((val, key) => {
          return (
            <tr key={key}>
              <td>{val.tindakan_igd.keys}</td>
              <td>{val.tindakan_igd.values}</td>
            </tr>
          )
        })}
      </table>
    </div>
  );
}
  
export default DetailPemasukan;

The Problem are on data.map until val.tindakan_igd.values. I don't know how to solve it in React

reactjs javascript
3 Answers

You need to iterate over tindakan_igd keys during mapping like so

      {data.map((val, key) => {
        return Object.keys(val.tindakan_igd).map((keyName) => {
          return (
            <tr key={`${keyName}-${key}`}>
              <td>{keyName}</td>
              <td>{val.tindakan_igd[keyName]}</td>
            </tr>
          )
        })
      })}
kuba0

You can follow this:

const data = [
  {
    tahun: 2015,
    tindakan_igd: {
      APS: [2000],
      Dirawat: [2000],
      Dirujuk_Luar: [2000],
      Dirujuk_Poli: [2000],
      Meninggal_DOA: [2000],
      Meninggal_IGD: [2000],
      Pulang: [2000]
    }
  }
];

Object.entries(data[0].tindakan_igd).map(item => {
  console.log(item[0], item[1][0]);
})

miniature0

u can use Object.entries https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

const data = [
      {
        tahun: 2015,
        tindakan_igd: {
          APS: [2000],
          Dirawat: [2000],
          Dirujuk_Luar: [2000],
          Dirujuk_Poli: [2000],
          Meninggal_DOA: [2000],
          Meninggal_IGD: [2000],
          Pulang: [2000]
        }
      }
    ];

const result = data.map((item, index) => {
          return Object.entries(item.tindakan_igd).map(([key, value]) => {
          return (
          <tr key={index.toString() + key}>
              <td>{key}</td>
              <td>{value[0]}</td>
            </tr>
          )
          })
        })
TimoDevs0
Related