Access object values in array nested in JSON object

Question

I have a GET request that sends back a JSON object structured like this:

{"ID":5176,
"DateFrom":"8/29/2018",
"DateTo":"8/29/2018",
"Units":[{"Key":"Value","Key2": "Value2"}]
}

I cannot access Units[0] value. I have tried the following:

testFunction(){
this.service.getJSON(params)
.subscribe((data) => { 
  this.model = data;
  this.dateFrom = this.model.DateFrom;
  this.dateTo = this.model.DateTo;
  this.unit = this.model.Units.Key;
  console.log(this.unit); //undefined
  }); 
 }
}
ngOnInit() {
this.testFunction();

}

What am I missing?

There's no such thing as a "JSON Object". data is an object, no JSON involved in the "problem". — Andreas
– Andreas, Commented Aug 31, 2018 at 15:45
this.unit = this.model.Units[0]; and this.unit.key return your value... — Vasim Hayat
– Vasim Hayat, Commented Aug 31, 2018 at 15:51

Shanil Arjuna · Accepted Answer · 2018-08-31 15:58:11Z

1

You should use

this.unit = this.model.Units[0].Key;

instead of

this.unit = this.model.Units.Key;

since Units.Key is undefined

edited Aug 31, 2018 at 15:58

answered Aug 31, 2018 at 15:49

Shanil Arjuna

1,13510 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

R2B Boondocks Over a year ago

I tried that and now receive this error: "Unable to get property 'Key' of undefined or null reference"

Shanil Arjuna Over a year ago

are you sure you are receiving the json from your service? try console.log(this.model) to confirm .

R2B Boondocks Over a year ago

I am sure its coming back as my date properties are able to be bound on my view

R2B Boondocks Over a year ago

This is 100% correct...I foolishly thought I was specifying the index on Key and using 'this.model.Units[1].Key' and it returned undefined because well...a 2nd object didn't exist -_-. Thanks!

Shanil Arjuna Over a year ago

Your welcome. Please accept the answer so it will help some else as well

Shivam Pandey · Accepted Answer · 2022-02-10 07:43:18Z

Since Units is an array of JSONs and the array contains only one element. It should be accessed by Units[0].

Units[0] is now a JSON, Key property is needed now. There are 2 ways to access it

Units[0].Key
Units[0]['Key']

The final code should look like

testFunction(){
this.service.getJSON(params)
.subscribe((data) => { 
  this.model = data;
  this.dateFrom = this.model.DateFrom;
  this.dateTo = this.model.DateTo;
  //first method
  //this.unit = this.model.Units[0].Key;
  // second method
  // this.unit = this.model.Units[0]['Key'];

  console.log(this.unit); //undefined
  }); 
 }
}
ngOnInit() {
this.testFunction();

}

Collectives™ on Stack Overflow

Access object values in array nested in JSON object

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related