How can I access JSON property of nested object inside object array

Question

I'm working on simple CRUD example using react.JS as my frontend and I ran into a issue that's probably because of my lack of experience working with React or JavaScript in general.

This is JSON I get from my API:

[{"idnaselje":1,"naziv":"Zagreb","postanskiBroj":10000,"drzavaId":1,"drzava":{"iddrzava":1,"naziv":"Hrvatska"}},{"idnaselje":2,"naziv":"Rijeka","postanskiBroj":51000,"drzavaId":1,"drzava":{"iddrzava":1,"naziv":"Hrvatska"}},{"idnaselje":14,"naziv":"Dubrava","postanskiBroj":10040,"drzavaId":1,"drzava":{"iddrzava":1,"naziv":"Hrvatska"}},{"idnaselje":15,"naziv":"Zadar","postanskiBroj":23000,"drzavaId":1,"drzava":{"iddrzava":1,"naziv":"Hrvatska"}}]

I'm trying to map drzava.naziv to display naziv...

Here is my render method:

private renderNaseljeTable(naseljeList: NaseljeData[]) {
        return <table className='table'>
            <thead>
                <tr>
                    <th></th>
                    <th>ID Naselje</th>
                    <th>Naziv</th>
                    <th>Postanski Broj</th>
                    <th>Drzava</th>
                </tr>
            </thead>
            <tbody>
                {naseljeList.map(nas =>
                    <tr key={nas.idnaselje}>
                        <td></td>
                        <td>{nas.idnaselje}</td>
                        <td>{nas.naziv}</td>
                        <td>{nas.postanskiBroj}</td>
                        <td>{nas.drzava}</td>
                        <td>
                            <a className="action" onClick={(id) => this.handleEdit(nas.idnaselje)}>Edit</a>  |
                            <a className="action" onClick={(id) => this.handleDelete(nas.idnaselje)}>Delete</a>
                        </td>
                    </tr>
                )}
            </tbody>
        </table>;
    }

This is data structure of NaseljeData:

export class NaseljeData {
    idnaselje: number = 0;
    naziv: string = "";
    postanskiBroj: string = "";
    drzava: string = "";
    drzavaid: number = 0;
}

My problem is how to access the Object drzava inside my array to get property naziv as string and display it?

I get the following error in the console:

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {iddrzava, naziv}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of FetchNaselje.

Alberto Trindade Tavares · Accepted Answer · 2018-10-11 11:11:41Z

You need to change the data structure of NaseljeData to have drzava as an object instead of string. You can have this, for example:

export class DrzavaData {
    iddrzava: number = 0;
    naziv: string = "";
}

export class NaseljeData {
    idnaselje: number = 0;
    naziv: string = "";
    postanskiBroj: string = "";
    drzava: DrzavaData = null;
    drzavaid: number = 0;
}

And then, in the render method, you can just use the dot notation to get the drzava's name (naziv):

{naseljeList.map(nas =>
    <tr key={nas.idnaselje}>
        <td></td>
        <td>{nas.idnaselje}</td>
        <td>{nas.naziv}</td>
        <td>{nas.postanskiBroj}</td>
        <td>{nas.drzava.naziv}</td>
        <td>
            <a className="action" onClick={(id) => this.handleEdit(nas.idnaselje)}>Edit</a>  |
            <a className="action" onClick={(id) => this.handleDelete(nas.idnaselje)}>Delete</a>
        </td>
    </tr>
)}

Hemadri Dasari · Accepted Answer · 2018-10-11 11:16:59Z

1

You can either use . notation to get the value or pass key name to drzava like I mentioned below

{naseljeList.map(nas =>
  <tr key={nas.idnaselje}>
      <td></td>
      <td>{nas.idnaselje}</td>
      <td>{nas.naziv}</td>
      <td>{nas.postanskiBroj}</td>
      <td>{nas.drzava && nas.drzava["naziv"]}</td>
      <td>
          <a className="action" onClick={(id) => this.handleEdit(nas.idnaselje)}>Edit</a>  |
          <a className="action" onClick={(id) => this.handleDelete(nas.idnaselje)}>Delete</a>
      </td>
  </tr>
)}

OR

{naseljeList.map(nas =>
      <tr key={nas.idnaselje}>
          <td></td>
          <td>{nas.idnaselje}</td>
          <td>{nas.naziv}</td>
          <td>{nas.postanskiBroj}</td>
          <td>{nas.drzava && nas.drzava.naziv}</td>
          <td>
              <a className="action" onClick={(id) => this.handleEdit(nas.idnaselje)}>Edit</a>  |
              <a className="action" onClick={(id) => this.handleDelete(nas.idnaselje)}>Delete</a>
          </td>
      </tr>
    )}

Edit:

You need to change your drzava: string = "" to drzava: object = {}

export class NaseljeData {
    idnaselje: number = 0;
    naziv: string = "";
    postanskiBroj: string = "";
    drzava: object = {};
    drzavaid: number = 0;
}

edited Oct 11, 2018 at 11:16

answered Oct 11, 2018 at 11:08

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

8 Comments

ToneCrate Over a year ago

You could also use nas.drzava.naziv EDIT: nevermind, saw your edited post

solujic Over a year ago

wow that did the trick but I'm little confused... because my drzava is still defined as string inside NaseljeData

Hemadri Dasari Over a year ago

@ToneCrate I agree too

Hemadri Dasari Over a year ago

@ChenChi Sorry I didn't get your question

solujic Over a year ago

@Think-Twice because look at my NaseljeData drzava is defined as string so when I put drzava.naziv I get error saying: Property naziv does not exist on type string

|

Collectives™ on Stack Overflow

How can I access JSON property of nested object inside object array

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related