How to convert array to json and bind the json data in a table in react js

Question

I have an array of,

I am trying to convert that to a JSON , so I can bind the data in a bootstrap table like this,

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;

Like in this example, they are binding Name and country from customers, I want to bind path data and mode data from the array and bind to the table.

I tried JSON.stringify but it is not working. How to do this?

This is the full code

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;

Answer 1

Judging by what you get in the console, you already have what you need, just replace customers with your array (response.data.tree) and replace also name and country with path and mode.

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

Answer 2

Add this after contentResponse line and check with console.log if is that what do you want.?

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