How [What is correct syntax] to read nested properties of Json response in React

Question

I am trying to display value of tinyui from the below response object which I'm receiving from a third-party confluence API via my in-house spring-boot API.

So the high level view, for example, is:

 "confluence-api"<--"spring-boot-api"<--"react-app"<---"user"

andthe JSON response is:

{
  "results": [
    {
      "id": "xxxxx",
      "type": "xxxx",
      "status": "xxxx",
      "title": "file",
      "restrictions": {},
      "_links": {
        "webui": "xxx",
        "tinyui": "",
        "self": "xxx",
      },
      "_expandable": {
        "container": "",
        "body": "",
        "version": "",       
        "space": "xxx"
      }
    },
  ],
  "start": 0,
  "limit": 25,
  "size": 9,
  "_links": {
    "self": "",
    "base": "",
    "context": ""
  }
}

However in my react app

import React, { Component } from "react";
import axios from "axios";

class Connect extends Component {
    state = {
        some:[],
        results:[],
      
    };

    componentDidMount() {
        const title = "sometext"
        axios.get(`http://localhost:xxxx/api/PageByTitle?title=${title}`,
            {
                headers : {
                    'Content-Type': "application/json",
                }})
            .then((res)=> {
                this.setState({ some: res.data?res.data:[]})
                this.setState({results:res.data.results?res.data.results:[]})
                console.log(this.state.some)
                console.log(this.state.some.results)
            })
            .catch(err => console.log(err))
    }

    render (){
        return(
            <div>
                {this.state.results.map(
                    (result) => <p>{result._links.tinyui}</p>
                )}
            </div>
        )
    }
}

export default Connect;

Your example data shows tinyui as either an empty string or undefined - so it won’t show anything. Is that what you mean by “does not work”? Do you see any errors in the console? — JBallin, Mar 05 '21 at 20:40
First, see: [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/q/30782948/1218980) — Emile Bergeron, Mar 05 '21 at 20:42
Then, you don't need to check for `res.data`, axios should always provide that property on successful request. — Emile Bergeron, Mar 05 '21 at 20:43
You can also call `setState` once with multiple properties, instead of multiple times with a single property each time. — Emile Bergeron, Mar 05 '21 at 20:44
Then, please provide a [mcve] with a clear explanation of what is not working and what you're expecting to happen. — Emile Bergeron, Mar 05 '21 at 20:44
by does not work i meant the error is unresolved variable _links — KeepItsimple, Mar 05 '21 at 20:47
@EmileBergeron the post is edited with the reproducible example — KeepItsimple, Mar 05 '21 at 20:53
_"unresolved variable"_ as in the [WebStorm IDE warning](https://stackoverflow.com/q/20835544/1218980)? — Emile Bergeron, Mar 05 '21 at 20:53
I mean, _"unresolved variable"_ isn't a JavaScript error, nor a clear explanation of what's happening. Is it crashing? Is `tinyui` really populated, because it's not in your example? etc. — Emile Bergeron, Mar 05 '21 at 21:06
I understand i should use it like result['_links'] instead of result._links — KeepItsimple, Mar 05 '21 at 21:16
Nope, that would be the same thing, with extra code. [dot notation vs. brackets](https://stackoverflow.com/q/4968406/1218980) — Emile Bergeron, Mar 05 '21 at 21:19
But it certainly did ``` {this.state.results.map((result)=>
{result['_links']['tinyui']}
)} — KeepItsimple, Mar 05 '21 at 21:34

score 0 · Answer 1 · edited Mar 06 '21 at 03:18

0

the correct syntax for reading nested objects in webstorm is

{this.state.results.map((result)=><p key = {result.id}>{result['_links']['tinyui']}</p>)}

How to fight tons of unresolved variables warning in WebStorm?

JavaScript property access: dot notation vs. brackets?

edited Mar 06 '21 at 03:18

Bhargav Rao

50,140
28
121
140

answered Mar 05 '21 at 21:40

KeepItsimple

1
2

If the warnings in WebStorm are bothering you, just [disable them](https://stackoverflow.com/a/34485146/1218980). They usually have a hard time parsing different libraries, like React, that manages the state behind the scene. Using the bracket notation only hides the warning, but it also pollutes your code. – Emile Bergeron Mar 05 '21 at 21:43

How [What is correct syntax] to read nested properties of Json response in React

1 Answers1