Nested object inside JSON in React

Question

Sory, I am new here. I generate Data object in ASP .Net Core and it is avaliable through GET GetData:

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;

namespace ReactImport.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class GetPostExampleController : ControllerBase
    {
        private Data data;

        public GetPostExampleController() =>
            data = new Data();

        [HttpGet("GetData")]
        public Data GetData()
        {
            return data;
        }
    }

    [JsonObject]
    public class Data
    {
        public Data() =>
            NestedData = new NestedData();
        public int Value { get; set; } = 999;
        public NestedData NestedData {get; set;}
    }

    [JsonObject]
    public class NestedData
    {
        public int NestedValue { get; set; } = 888;
    }
}

I can receive this object in my React app and read Data.Value, but if I try read Data.NestedData.NestedValue I have an error TypeError: Cannot read property 'nestedValue' of undefined:

import React, { Component } from 'react';

export class GetPostExample extends Component {
    static displayName = GetPostExample.name;

    componentDidMount() {
        this.ReadData();
    }

    constructor(props) {
        super(props);
        this.state = { ReadData: Object, loading: true };
    }

    async ReadData() {
        const response = await fetch('api/GetPostExample/getData');
        const data = await response.json();
        this.setState({ ReadData: data, loading: false });
    }

    render() {
        return (
            <div>
                <div>Get:</div>
                <div>Data.Value = {this.state.ReadData.value}</div>
                {/*TypeError: Cannot read property 'nestedValue' of undefined
                *<div>Data.Value = {this.state.ReadData.nestedData.nestedValue}</div>*/}
            </div>
        );
    }
}

received object

honestly none of what you have posted makes sense. what is Data? What is `NestedData`? Where does it come from? From your question it looks like Data.NestedData is actually a function and would not give you .NestedValue without calling the function first... — Deryck, Nov 24 '19 at 10:38
Welcome to SO, please refer to [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example), you can use a sandbox example in my answer and share it after editing your question — Dennis Vash, Nov 24 '19 at 10:41

score 0 · Answer 1 · answered Nov 24 '19 at 10:13

0

If it is a valid Javascript Object, you may access it like so:

this.state.ReadData.nestedData.nestedValue

const obj = {
  nestedData: {
    nestedValue: 888
  },
  value: 999,
  loading: false
};

class App extends React.Component {
  state = {
    ReadData: obj
  };

  render() {
    return (
      <div>
        <div>Get:</div>
        <div>Data.Value = {this.state.ReadData.value}</div>
        <div>
          Data.NestedData.NestedValue = {this.state.ReadData.nestedData.nestedValue}
        </div>
      </div>
    );
  }
}

answered Nov 24 '19 at 10:13

Dennis Vash

50,196
9
100
118

It looks like correct syntax, but still not working. I added {console.log(this.state.ReadData)} (it shows Object with NestedData (which is with NestedValue = 888 inside)). I also added {console.log(this.state.ReadData.nestedData)} (it shows Object with NestedValue = 888 inside). But {console.log(this.state.ReadData.nestedData.nestedValue)} gives me an error "TypeError: Cannot read property 'nestedValue' of undefined" – Kreator2 Nov 24 '19 at 10:38
How can we know what and where you added in your code without any producible example? Also, notice that you can't render a log, you must render a React Node. – Dennis Vash Nov 24 '19 at 10:40

score 0 · Accepted Answer · answered Nov 24 '19 at 20:41

I found answer here.

render() {
    let nestedValue;
    if (this.state.ReadData.nestedData && this.state.ReadData.nestedData.nestedValue)
        nestedValue = this.state.ReadData.nestedData.nestedValue;
    return (
        <div>
            <div>Get:</div>
            <div>Data.Value = {this.state.ReadData.value}</div>
            <div>Data.NestedData.NestedValue = {nestedValue}</div>
        </div>
    );
}

Nested object inside JSON in React

2 Answers2