Displaying JSON multi-dimensional array data with ReactJS and map

Question

I have some multi-dimensional JSON data that contains different clothing items, each clothing item containing its own array of information.

I am trying to display this as such, using ReactJS:

{Product Name}
  {size 1} has {quantity 1} in stock
  {size 2} has {quantity 2} in stock
  {size 3} has {quantity 3} in stock

My JSON looks like this:

    {
        "myShirt": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ],
         "myShirt2": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ],
         "myShirt3": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ]
    }

So for example, in this case my desired output would be:

myShirt
    Small has 0 in stock
    Medium has 0 in stock
    Large has 0 in stock
myShirt2
    Small has 0 in stock
    Medium has 0 in stock
    Large has 0 in stock
myShirt3
    Small has 0 in stock
    Medium has 0 in stock
    Large has 0 in stock

I have created a React component that includes this JSON data as part of its state. This component looks like this:

class Products extends React.Component {
    constructor() {
    super();
    this.state = {
        data: [
            {
                "myShirt": [
                    {
                        "size_text": "Small",
                        "quantity": 0,
                    },
                    {
                        "size_text": "Medium",
                        "quantity": 0,
                    },
                    {
                        "size_text": "Large",
                        "quantity": 0,
                    },
                ],

                "myShirt2": [
                    {
                        "size_text": "Small",
                        "quantity": 3,
                    },
                    {
                        "size_text": "Medium",
                        "quantity": 0,
                    },
                    {
                        "size_text": "Large",
                        "quantity": 0,
                    },
                ],
                "myShirt3": [
                    {
                        "size_text": "Small",
                        "quantity": 3,
                    },
                    {
                        "size_text": "Medium",
                        "quantity": 0,
                    },
                    {
                        "size_text": "Large",
                        "quantity": 0,
                    },
                ]
            }]
        }
    }
    render() {
        return (
            <div>
                {
                    // HOW DO I DISPLAY MY OUTPUT HERE?
                }
            </div>
        );
    }
}

My approach to displaying my output was using .map. However, the bare code I used to do this wasn't successful. It looked like this:

render() {
    return (
        <div>
            {
                this.state.data.map((product, i) =>
                    <p>{product.map((productData, j) =>
                        <span>{productData.size_text}</span>
                    )
                    }</p>
                )
            }
        </div>
    );
}

This code doesn't attempt to display the entire output as I was just testing out the waters to see if I could get anything, at least a size to display. As you can tell, I'm pretty much stuck in the render function of the component. I don't know how I would access the product name, and moreover the product size name and quantity.

How would you go about solving this to get it to look like the desired output?

Thanks!

Your json doesn't seems to be correct. Its a collection inside an array. It should be either of the two. Map works on an array, as for collection you need to have a different approach. — Fawaz
– Fawaz, Commented Apr 20, 2018 at 11:18
@user2030942 please mark this accepted it it resolved your issue — Muhammad Usman
– Muhammad Usman, Commented Apr 20, 2018 at 11:29
@Fawaz Thanks for pointing that out. I've fixed it on my question. — user2030942
– user2030942, Commented Apr 20, 2018 at 11:45

Hassan Imam · Accepted Answer · 2018-04-20 12:04:51Z

You can use Object.keys() to iterate through each key of state and then use array#map to iterate each array object.

class Products extends React.Component {
  constructor() {
    super();
    this.state = { "myShirt": [ { "size_text": "Small", "quantity": 0 }, { "size_text": "Medium", "quantity": 0 }, { "size_text": "Large", "quantity": 0}, ], "myShirt2": [ { "size_text": "Small", "quantity": 3 }, { "size_text": "Medium", "quantity": 0}, { "size_text": "Large", "quantity": 0}, ], "myShirt3": [ { "size_text": "Small", "quantity": 3 }, { "size_text": "Medium", "quantity": 0}, { "size_text": "Large", "quantity": 0}, ] }
    }
    
  render() {
    return (<div>{Object.keys(this.state).map(k => {
      return <div>{k}<div>{
        this.state[k].map(o => <div className={'left'}>{`${o.size_text} has ${o.quantity} in stock`}</div>)
      }</div></div>
    })}</div>)
  }
}
ReactDOM.render(<Products />, document.getElementById('root'));

.left {
    margin-left: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

Muhammad Usman · Accepted Answer · 2018-04-20 11:23:36Z

Well, I would've done it this way.

You can check console for logged values in desired format.

Now, I expect, you can add these values in your template yourself :)

Thanks

var stock = {
        "myShirt": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ],
         "myShirt2": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 1,
             },
         ],
         "myShirt3": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ]
    }
    
    Object.keys(stock).map(e=>{
      console.log(e+":");
       stock[e].map(o=> console.log(o.size +" has "+o.quantity+" in stock"))
    })

user2030942 · Accepted Answer · 2018-04-22 12:03:47Z

0

Thanks everyone for your comments!

To solve this I used a combination of two of the answers, and made my render function looks as such:

render() {
    return (
        <div id="product-container">{Object.keys(this.state.data).map(productId => {
            return <div id="product-info">
                <h2>{productId}</h2>
                <div id="product-line-detail">{
                    this.state.data[productId].map(productDetail => <div className={'left'}>{`${productDetail.size_text} has ${productDetail.quantity} in stock`}</div>)
                }
                </div>
            </div>
        })}
        </div>
    )
}

answered Apr 22, 2018 at 12:03

user2030942

2437 silver badges26 bronze badges

Collectives™ on Stack Overflow

Displaying JSON multi-dimensional array data with ReactJS and map

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related