How can I render nested objects and arrays in JSX?

Question

I'm having trouble wrapping my head around the rendering of nested objects and arrays. How can I loop through my objects and render this data?

I'm calling an API. Here's the hook and the JSX.

const [orderData, setOrderData] = useState([]);

return (
    <>
      <div>
        <ul>
          {orderData.map(item => {
            console.log(item);
          })}
        </ul>
      </div>
    </>
  );

console.log(item) returns six objects.

Here are the six objects.

First item is an object with an array of objects. The other five objects contain objects.

How can I render data from all six objects within the JSX? I want to be able to access data from each object. How can I loop through these?

As for UI: it doesn't really matter. For now, I just want to access all of the data and render it in a UL or something.

Accessing data.orders.

Attempting to access data.orders.deadline, or data.orders.description

Is the structure random or is it known that the first object will always look like X and the other 5 like Y? — Chris, Feb 20 '20 at 16:29
@Chris The other five objects are identical to the second shown in the second scr shot — Wesley Bonneville, Feb 20 '20 at 16:32
you can create one generic component to accept a prop as array and display the list items from that. For each of the 6 object Mount the component by passing an array, you can convert those object to arrays using Object.keys / Object.values — Arun-G, Feb 20 '20 at 16:32
Before you figure out **how** to render anything, you need to figure out **what** you want to render. Specifically, what UI widgets do you want and where do you want them located. — Code-Apprentice, Feb 20 '20 at 17:07

Josh Wulf · Answer 1 · 2020-02-20T18:03:14.103

2

const ordersBySomething = orderData.map(item => item.data.orders)

Now you have an array that contains elements that are an array of orders. Each order is an object.

ordersBySomething[0].forEach(console.log) // logs order objects

Naming this correctly will go a long way to helping you design it. Each item in the orderData is what? (It is of type array of orders). Is it ordersBy...?

Then you need to map over the array of order objects. In the JSX you will probably render - what, a row, a table?

Each line in the ordersBySomething is an array of objects. So you would probably map over that and return a component for each object.

For example, if the first array is an array of days, and the elements are orders for that day:

const ordersByWeek = orderData.map(item => item.data.orders)
const arrayOfRenderedOrders = ordersByWeek.map(day => day.map(orderData => renderOrderDataComponent(orderData))

Now you have an array that contains one element per day, and in each element you have an array of rendered orders.

Programming is mostly correctly naming data structures and then a little bit of coding to transform them. The programming is obvious when the names are clear. For example:

For each day, show the orders for that day in a table with each order on a row.

edited Feb 20 '20 at 18:03

answered Feb 20 '20 at 17:32

Josh Wulf

4,727
2
20
34

This is almost what I came up with. The issue is that running something like this doesn't work. console.log( ordersBySomething.map(item => { return item.deadline; }) ); – Wesley Bonneville Feb 20 '20 at 17:43
I can map through ordersBySomething but I can't access the data inside of data.orders -- I receive an error – Wesley Bonneville Feb 20 '20 at 17:48
You need to show the code, and the error to get help on this. I'm not psychic you know! :-P – Josh Wulf Feb 20 '20 at 17:53
I added some screenshots at the bottom of the post if you'd like to give it a look – Wesley Bonneville Feb 20 '20 at 18:01
I updated my answer. It will be clearer to you, and to us, if you name the data structures. – Josh Wulf Feb 20 '20 at 18:04

score 0 · Answer 2 · answered Feb 20 '20 at 16:25

You first have to decide how you want the objects to render. I suggest opening MS Paint or a similar program and drawing what you want the UI to look like. From there, I suggest creating a React component that renders a single object from your list. Then your map() call will just render that component with a JSX tag.

How can I render nested objects and arrays in JSX?

2 Answers2