无法显示从后端作为对象接收的数据，

Question

I am fetching data from the backend, it has a particular sub-part called headers which further has an additional name:value pairs . like this - data : { headers : {name:"Nishant", value:"random" } } , I want to display all the fields inside a modal , When I try to use Object.keys() , this error is thrown - "cannot convert undefined or null to object".

render(){
 return(
   let request_data = this.props.head // has the entire data
   let data = request_data.headers //contains the headers section to be displayed.
   <div className="modal-body">
            <div className="row">
              <div className="col-lg-6">
              {
                <div>
                  {// want to display the headers data here }
                  { (request_data.body !== '') ? <div>Body : {request_data.body}</div> : ''}
                </div>
              }
              </div>
           </div>
    </div>
 );
}

Not Sure what to do as I tried Using Object.keys but an error is thrown saying "cannot convert undefined or null to object". Although by Using JSON.stringify() I am getting the result but not in the expected look and feel.

Answer 1

在<pre>标签中呈现文本并使用JSON.stringify

<pre>{JSON.stringify(request_data.body,null,2)}</pre>

Answer 2

If a valid response is received. For Example:

{
"data": {
    "headers": {
        "name": "Nishant",
        "value": "random"
    }
}
}

var responseData = JSON.parse('{ "data": { "headers": { name: "Nishant", value: "random" } } }')

The first option will display the value in data object and the second will display the value inside the headers object.

<pre>responseData.data</pre> 
<pre>responseData.data.headers</pre> 

Answer 3

Check header is not undefined before get values;

            <div className="col-lg-6">
                {
                    <div>
                        {request_data.header ? Object.values(request_data.header).map(value => value) : null}

                        {(request_data.body !== '') ? <div>Body : {request_data.body}</div> : ''}
                    </div>
                }
            </div>