Parse JSON array in Typescript
33,233
You gave incorrect type to your parsed data. Should be something like this:
interface MyObj {
name: string
description: string
}
let obj: { string: MyObj[] } = JSON.parse(data.toString());
So it's not MyObj
, it's object with property string
containing array of MyObj
. Than you can access this data like this:
console.log(obj.string[0].name, obj.string[0].description);
Instead of using anonymous type, you can also define interface
for it:
interface MyRootObj {
string: MyObj[];
}
let obj: MyRootObj = JSON.parse(data.toString());
Related videos on Youtube
Author by
Jendorski Labs
Graduate, Electrical/Electronics Engineering, major in Telecommunications, BlackBerry10, Java/Android, developer. SDN/NFV software engineer.
Updated on January 01, 2020Comments
-
Jendorski Labs almost 4 years
i have a JSON response from remote server in this way:
{ "string": [ { "id": 223, "name": "String", "sug": "string", "description": "string", "jId": 530, "pcs": [{ "id": 24723, "name": "String", "sug": "string" }] }, { "id": 247944, "name": "String", "sug": "string", "description": "string", "jlId": 531, "pcs": [{ "id": 24744, "name": "String", "sug": "string" }] } ] }
In order to parse the response, to list out the "name" & "description", i have written this code out:
interface MyObj { name: string desc: string } let obj: MyObj = JSON.parse(data.toString());
My question is how do i obtain the name and description into a list that can be displayed.
-
Matthias247 almost 7 yearsOne additional remark to the already good answer: There is no guarantee that the
JSON.parse
d data realy conforms to the interface that was defined after parsing. If the server suddenly sends other data it might no longer conform to it, and accessing the data through the previously expected interface might lead to a crash. So it's always recommended to validate the data between parsing and using it. -
Jendorski Labs almost 7 yearsIt is indeed an excellent answer, however, were i to insert into the HTML, please how would go about. I used
*ngFor = "let obj of foundData"
but cannot seem to get the list of name -
Jendorski Labs almost 7 yearsOh and @Matthias247, how do i validate the data please?
-
Yaroslav Admin almost 7 years@JendorskiLabs
<p *ngFor = "let item of obj.string">{{ item.name }}</p>
-
Jendorski Labs almost 7 yearsThanks, i tried that already. error from JavaScript Console reads
Cannot read property 'string' of undefined
. I also tried<p *ngFor = "let item of obj">{{ item.string[0].name }}</p>
to no avail. -
Jendorski Labs almost 7 yearsfrom the console message, only the first set of name and description is displayed, i am looking to list all the
name
anddescription
viahtml
usingngFor
. Will using interface help solve this? -
Yaroslav Admin almost 7 years@JendorskiLabs If it works in console and you exposed same
obj
variable to your template, code from my previous comment should give you what you want. -
Yaroslav Admin almost 7 years@JendorskiLabs You can also try to use elvis operator:
<p *ngFor = "let item of obj?.string">{{ item.name }}</p>
. That should help ifobj
is initially undefined. -
Jendorski Labs almost 7 yearsPlease what do i do, i have next to no knowledge in Typescript, but for SO. Using Yaroslav Admin recommendation to use
<p *ngFor = "let item of obj.string">{{ item.name }}</p>
, an error in the Javascript console is displayed, even, the page does not load -
Yaroslav Admin almost 7 years@JendorskiLabs note "?." In my previous comment.
-
Jendorski Labs almost 7 yearsSure, i did notice it, i am using the ionic 2 framework, could that be a problem?, as the latest recommendation did not display the list.
-
KramFfud over 2 yearsAny reason not to use
let objs: Array<myObj> = JSON.parse(data.toString());
? Works for me and smells a bit more elegant.