Display json nested objects in React

Question

I am new to react and trying to display nested json object. I want to iterate "hookah_tobacco" nested object and display tobacco types.

Json part:

{
"id": 1,
"hookah_name": "Smoke city",
"city": 131,
"street": "Osinnya, 33",
"website": "",
"phone": "0672222222",
"description": "Cool bar.",
"credit_card": true,
"hookah_type": [],
"hookah_tobacco": [
    {
        "hookah_tobacco": "Al-Fakher"
    },
    {
        "hookah_tobacco": "Serbetli"
    }
],
"summer_terrace": false,
"hookah_images": [
    {
        "id": 1,
        "hookah_image": "http://127.0.0.1:8000/hookahImages/O4P02PtmT22nv8LwB85KDw-752x440.jpg"
    },
    {
        "id": 2,
        "hookah_image": "http://127.0.0.1:8000/hookahImages/kalyannaya-zmist-kiev-vxod-pushkinskoy-1024x768.jpeg"
    }
]

}

React part:

class HookahDetail extends Component{

render(){
    const obj = this.props.hookahDetail;
    
    return(
        // TODO move style to css
        <div style = {{ color: "yellow", border: "1px solid yellow"  }}>
            <h4>{obj.hookah_name}</h4>
            <h5>
                    <p>{obj.city}</p>
                    {obj.street}
                    <p>{obj.hookah_style}</p>
                    <p>{obj.phone}</p>
                    Tobacco: 
                    <div>
                        
                    </div>
                    <p>{obj.description}</p>
                    <p>{obj.credit_card}</p>
                    <p>{obj.summer_terrace}</p>
                    <div>
                        {/* here is some mistake */}
                        {obj.hookah_tobacco.map((t) => {
                            return (
                                <div>{t.hookah_tobacco}</div>
                            )
                        })}
                    </div>
            </h5>
        </div>
    )
}

}

Error part:

TypeError: obj.hookah_tobacco is undefined

Console log part when {console.log(obj.hookah_tobacco)}():

0: Object { hookah_tobacco: "Al-Fakher" }

1: Object { hookah_tobacco: "Serbetli" }

I can't understand why map() function does not work.

This is weird. try to log obj and obj.hookah_tobacco

ינון רחמים
– ינון רחמים

2021-04-01 21:18:17 +00:00
Commented Apr 1, 2021 at 21:18 — ינון רחמים
– ינון רחמים, Commented Apr 1, 2021 at 21:18

Jagjeet Singh · Accepted Answer · 2021-04-02 04:41:41Z

1

Try to use it like this. This way can handle the undefined error

...
    {obj.hookah_tobacco ? obj.hookah_tobacco.map((t) => {
                    return (
                        <div>{t.hookah_tobacco}</div>
                    )
                }) : null}

answered Apr 2, 2021 at 4:41

Jagjeet Singh

5053 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display json nested objects in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related