Question 110348 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – How can I print using map an array of arrays with objects within array react?

I have functional component that takes an array of arrays with objects but I don’t know how to access data in the return function of the render

let dataItems = [
  [
    {
      data1: "1234",
      data2: "ABCD",
      data3: "5678",
      data4: "EFGH",
    },
    {
      data1: "10203040",
      data2: "A1B1C1D1",
      data3: "50607080",
      data4: "EFGH",
    },
    {
      data1: "6789",
      data2: "jklm",
      data3: "1000",
      data4: "EFGH",
    },
    {
      data1: "128",
      data2: "zwxy",
      data3: "5",
      data4: "lmno",
    },
  ],
  [
    {
      data1: "1234",
      data2: "ABCD",
      data3: "5678",
      data4: "EFGH",
    },
    {
      data1: "10203040",
      data2: "A1B1C1D1",
      data3: "50607080",
      data4: "EFGH",
    },
    {
      data1: "6789",
      data2: "jklm",
      data3: "1000",
      data4: "EFGH",
    },
    {
      data1: "128",
      data2: "zwxy",
      data3: "5",
      data4: "lmno",
    },
  ],
];

I tried to pass the data to another component to print the data but I don’t know how to pass an unnamed array with the map function.

My code.

 dataItems.map((item, index) => {
  return ( 

{ item.content.map((c, i) =>
   <PrintComponent>
   )
    }

)
   })

I will print a bi-dimensional matrix in chunks of 4 elements using bootstrap 4 tabs

Im trying to show the data like a bi-dimensional array like this

row1 row2 row3 row4
data01 data02 data03 data04
data05 data06 data07 data08

…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved with make the component within the maps.

    using this lines

    dataItems.map((item) => {
return item.map((items) => { console.log("data1", items.data1)});
});

    gives me the data several times, so I include some slice for only one time

    dataItems.slice(0, 1).map((item) => {
return item.map((items) => { console.log(items)});
});

  2. 0

    For this you have to use multiple maps for data rending.

    For Example:

    dataItems.map((item) => {
return item.map((items) => { console.log("data1", items.data1)});
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search