Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
                <th>File Name</th>
                <th>Username</th>
            </thead>
            <tbody>
            {customers.map(customers=>
                        <td>{customers.Name}</td>
                        <td>{customers.Country}</td>
            </tbody>
          </Table>
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>
                <th>File Name</th>
                <th>Username</th>
            </thead>
            <tbody>
            {customers.map(customers=>
                        <td>{customers.Name}</td>
                        <td>{customers.Country}</td>
            </tbody>
          </Table>
export default Home;
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
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 =>
        <td>{element.path}</td>
        <td>{element.mode}</td>
                Myabe the problem here is that you are calling getContents asynchronously, try await getContents(); in your first line.
– Javito
                Nov 8, 2022 at 6:57
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.