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());
Share:
33,233

Related videos on Youtube

Jendorski Labs
Author by

Jendorski Labs

Graduate, Electrical/Electronics Engineering, major in Telecommunications, BlackBerry10, Java/Android, developer. SDN/NFV software engineer.

Updated on January 01, 2020

Comments

  • Jendorski Labs
    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
    Matthias247 almost 7 years
    One additional remark to the already good answer: There is no guarantee that the JSON.parsed 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
    Jendorski Labs almost 7 years
    It 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
    Jendorski Labs almost 7 years
    Oh and @Matthias247, how do i validate the data please?
  • Yaroslav Admin
    Yaroslav Admin almost 7 years
    @JendorskiLabs <p *ngFor = "let item of obj.string">{{ item.name }}</p>
  • Jendorski Labs
    Jendorski Labs almost 7 years
    Thanks, 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
    Jendorski Labs almost 7 years
    from the console message, only the first set of name and description is displayed, i am looking to list all the name and description via html using ngFor. Will using interface help solve this?
  • Yaroslav Admin
    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
    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 if obj is initially undefined.
  • Jendorski Labs
    Jendorski Labs almost 7 years
    Please 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
    Yaroslav Admin almost 7 years
    @JendorskiLabs note "?." In my previous comment.
  • Jendorski Labs
    Jendorski Labs almost 7 years
    Sure, 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
    KramFfud over 2 years
    Any reason not to use let objs: Array<myObj> = JSON.parse(data.toString()); ? Works for me and smells a bit more elegant.