How to extract data from nested json in react

Question

I have madethe following code. So I have to retrieve data from json and present them in react. I have basicly one nested .joson object inside the other one. I know to to retrieve needed data from "root" json, but have a problem with doing it for other one. In this example I got as output Now I don't need all thath json object inside, just Neko from name. I have tried {props.pred.nastavnik.name} but it did not work. (it didn't gave any output)

 <CardContent>
            <Typography className={classes.title} color="textSecondary" gutterBottom>
                Nastavnik
            </Typography>
            <Typography variant="h5" component="h2">
                {props.pred.nastavnik}
            </Typography>
            <Typography className={classes.title} color="textSecondary" gutterBottom>
                Br studenata
            </Typography>
            <Typography variant="h5" component="h2">
                {props.pred.broj_studenata}
            </Typography>



        </CardContent>

Every help would be great

Answer 1

nastavnik variable is a string. You should convert it to object by: JSON.parse(str) For example:

 const str = '{"id":2,"admin":false,"name":"Neko","sifra":"sifra"}' console.log(JSON.parse(str))