Understand and extract data from a JSON array using Typescript

Question

Understand and extract data from a JSON array using Typescript

Here is a JSON response I received from a remote server:

{
  "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"
      }]
    }
  ]
}

To extract and list the "name" & "description" values from this response, I have created the following code:

interface MyObj {
  name: string
  desc: string
}
let obj: MyObj = JSON.parse(data.toString());

I'm now looking for help on how to display the extracted "name" and "description" in a format that can be easily shown on a webpage.

json typescript ionic2

Answer 1

Answer №1

Your parsed data has an incorrect type assigned to it. It should be structured like this:

interface MyObj {
  name: string
  description: string
}

let obj: { string: MyObj[] } = JSON.parse(data.toString());

Instead of just MyObj, make sure you have an object with a property named string that contains an array of MyObj. This will allow you to access the data in this format:

console.log(obj.string[0].name, obj.string[0].description);

If you prefer, you can define an interface for the structure instead of using an anonymous type:

interface MyRootObj {
  string: MyObj[];
}

let obj: MyRootObj = JSON.parse(data.toString());

Answer 2

Your parsed data has an incorrect type assigned to it. It should be structured like this:

interface MyObj {
  name: string
  description: string
}

let obj: { string: MyObj[] } = JSON.parse(data.toString());

Instead of just MyObj, make sure you have an object with a property named string that contains an array of MyObj. This will allow you to access the data in this format:

console.log(obj.string[0].name, obj.string[0].description);

If you prefer, you can define an interface for the structure instead of using an anonymous type:

interface MyRootObj {
  string: MyObj[];
}

let obj: MyRootObj = JSON.parse(data.toString());

Understand and extract data from a JSON array using Typescript

Answer №1

Similar questions

Unity3D encountering issues running Newtonsoft Json code

Error in TypeScript: It is not possible to use a component with MUI styling as a JSX element

Implementing a NextJS client component within a webpage

When attempting to add mp3 files to a Vue/TypeScript application, a "Module not found" error is triggered

Implementing the same concept yet yielding diverse variations?

Is it necessary for me to develop an Angular library in order to release a basic TypeScript class that makes use of Angular components?

Execute a selector on child elements using cheerio

The tsconfig.json file does not support the path specified as "@types"

Monitor a JSON endpoint for updates using Python on a regular basis

Equal-sized tiles in Highchart treemaps

Use JavaScript's Array.filter method to efficiently filter out duplicates without causing any UI slowdown

Whenever the route changes in Angular, the components are duplicated

Using rxjs takeUntil will prevent the execution of finalize

Creating a parameterized default route in Angular 2

What is the best way to filter and sort a nested tree Array in javascript?

Using Angular: A guide to setting individual values for select dropdowns with form controls

What is the best way to ensure type safety in a Promise using Typescript?

Using TypeScript to set an HTMLElement in a web page

Receiving JSON output twice

Implement new interface methods on-the-fly