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!

Answer 1

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")) }) 

Answer 2

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> 

Answer 3

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>
    )
}