Can't get certain data from JSON, returns undefined Angular 6

Question

I'm trying to extract "data" from this JSON but it keeps throwing undefined as result.

Extract of code where I'm getting this error:

ngOnInit(): void {
    this.testService.getTestWithObservable().subscribe(
        res => {
            let user = res["users"];
            let user_data = user["data"];

            this.user_data = user_data;

            console.log(user_data);
            console.log(res);
        }
    );
}

res outputs the whole JSON but user_data throws:

ERROR TypeError: Cannot read property 'data' of undefined at SafeSubscriber._next

JSON

[{
    "id": 1,
    "users": {
        "user_id": 14,
        "data": [{
            "name": "James",
            "age": 20
        },
        {
            "name": "Damien",
            "age": 25
        }]
    }
}
{
    "id": 2,
    "users": {
        "user_id": 11,
        "data": [{
            "name": "James",
            "age": 20
        },
        {
            "name": "Damien",
            "age": 25
        }]
    }
}]

Laiso · Accepted Answer · 2018-07-09 08:27:54Z

1

Your JSON is an array so you need to use an index or a loop to access one of your item like this:

ngOnInit(): void {
    this.testService.getTestWithObservable()
        .subscribe(
            res => res.forEach(user => this.user_data = [...(this.user_data || []), user['users']['data']]);
        );
}

Or:

ngOnInit(): void {
    this.testService.getTestWithObservable()
        .subscribe(
            res => this.user_data = res[0]['users']['data']);
        );
}

The first code will store in the user_data array all the data prop of each users

edited Jul 9, 2018 at 8:27

answered Jul 6, 2018 at 14:52

Laiso

2,6503 gold badges19 silver badges33 bronze badges

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

3 Comments

prevox Over a year ago

Hello, I'm getting this: ERROR TypeError: Cannot read property 'concat' of undefined

prevox Over a year ago

Very interesting solution. Got another question, if you don't mind. After ngOnInit I got an array containing data to fill my table of users. I don't understand how to fill this array with the mapped result from the observable since I can't apply any logic outside of a function and if I write a function then call it on the same TS file I get "Function implementation is missing or not immediately following the declaration". Do you know why I get this?

Laiso Over a year ago

@prevox > Can you ask a new question for your problem? Thank you

Muhammed Albarmavi · Accepted Answer · 2018-07-06 15:06:32Z

0

The result is array so you have to use index to access to the array data ,

    this.testService.getTestWithObservable()
     .map( result => result.map( i => i.users.data) )  // array of data array
     .subscribe(
        res => {

            this.user_data = [];
            res.forEach(i => this.user_data(...i));
            console.log(this.user_data); // all users data as array 
        }
    );
}

loop throw the data by ngFor

<div *ngFor="let user of user_data">
  {{user.name}} , age : {{user.age}}
</div>

edited Jul 6, 2018 at 15:06

answered Jul 6, 2018 at 14:46

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

6 Comments

prevox Over a year ago

How can I store "data" from both user 1 and 2 to use it later in a ngFor? Or should I iterate through the result directly?

Muhammed Albarmavi Over a year ago

the result is array so you can use it with ngFor

Muhammed Albarmavi Over a year ago

I can write an example if you want ??

prevox Over a year ago

That would be great, I'm not sure how to iterate through the array with ngFor yet

Muhammed Albarmavi Over a year ago

@prevox I have update the answer first I map the data to user data only so the resull is array of data array at the end I cobine all the data a single item array

|

Collectives™ on Stack Overflow

Can't get certain data from JSON, returns undefined Angular 6

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related