如何將陣列轉換為json并在reactjs中系結表中的json資料

我有一個陣列，

我正在嘗試將其轉換為 JSON ，因此我可以像這樣將資料系結到引導表中，

import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";

function Home() {
 
  const customers = [
    {
      CustomerId: 1,
      Name: "John Hammond",
      Country: "United States",
    },
    {
      CustomerId: 2,
      Name: "Mudassar Khan",
      Country: "India",
    },
    {
      CustomerId: 3,
      Name: "Suzanne Mathews",
      Country: "France",
    },
    {
      CustomerId: 4,
      Name: "Robert Schidner",
      Country: "Russia",
    },
  ];

  

  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <Table striped bordered hover size="sm">
            <thead>
              <tr>
                <th>File Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
            {customers.map(customers=>
                    <tr>
                        <td>{customers.Name}</td>
                        <td>{customers.Country}</td>
                    </tr>
                )}
            </tbody>
          </Table>
        </div>
      </div>
    </div>
  );
}

export default Home;

就像在這個例子中一樣，它們是系結客戶的名稱和國家，我想系結陣列中的路徑資料和模式資料并系結到表。

我試過 JSON.stringify 但它不起作用。這個怎么做？

這是完整的代碼

import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";
import { Octokit } from "octokit";

function Home() {
  getContents();
  let jsonString = '';
  const customers = [
    {
      CustomerId: 1,
      Name: "John Hammond",
      Country: "United States",
    },
    {
      CustomerId: 2,
      Name: "Mudassar Khan",
      Country: "India",
    },
    {
      CustomerId: 3,
      Name: "Suzanne Mathews",
      Country: "France",
    },
    {
      CustomerId: 4,
      Name: "Robert Schidner",
      Country: "Russia",
    },
  ];
  let contentResponse = "";
  let valueArray = [];
  async function getContents() {
    try {
      return await new Promise(async (resolve, reject) => {
        try {
          const octokit = new Octokit({
            auth: "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",
          });
          const response = await octokit.request(
            "GET /repos/KaranS0406/React/git/trees/4c1289a6405a5d87de6f1071ce723ee8b94be276?recursive=1"
          );
          console.log(response.data.tree);
          contentResponse = response.data.tree;
          Object.entries(contentResponse).forEach((element) => {
            const [key, value] = element;
            valueArray.push(value);
          });
          resolve("success");
        } catch (error) {
          reject("error");
        }
      });
    } catch (error) {
      console.log(error);
    }
  }

  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <Table striped bordered hover size="sm">
            <thead>
              <tr>
                <th>File Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
            {customers.map(customers=>
                    <tr>
                        <td>{customers.Name}</td>
                        <td>{customers.Country}</td>
                    </tr>
                )}
            </tbody>
          </Table>
        </div>
      </div>
    </div>
  );
}

export default Home;

uj5u.com熱心網友回復：

在 contentResponse 行之后添加這個并檢查 console.log 是否是你想要的。？

const convertdata = contentResponse.map((item) =>{
    let obj={
      Name:item.path,
      Country:item.mode
  }
})

uj5u.com熱心網友回復：

您不必將該 JSON 轉換為陣列。因為您的 JSON 已經在一個陣列中。（在您的代碼中似乎是這樣。）只需映射并撰寫該Customers陣列即可。

uj5u.com熱心網友回復：

從您在控制臺中獲得的內容來看，您已經擁有了所需的內容，只需替換customers為您的陣列 ( response.data.tree) 并將 andname替換country為pathand mode。

{myArray.map(element =>
    <tr>
        <td>{element.path}</td>
        <td>{element.mode}</td>
    </tr>
)}

標籤：反应

上一篇：在反應JSX中的大括號內顯示括號

下一篇：我應該將匯入的組件作為道具傳遞還是可以直接在子組件中匯入它-ReactJS