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

I'm struggling to transfer information from my form to TypeScript in Angular

Exploring the Magic of Class Variable Destructuring in React

Tips on sending nested JSON data to a Spring Controller

"What is the best way to specify a type for the src attribute in a tsx file within a

Ways to retrieve JSON information and incorporate it into an if statement in this specific scenario

Invoke the submit function of a form located outside a Material UI dialog from within the dialog

Using `useState` within a `while` loop can result in

Encountering a surprise token < while processing JSON with ASP.NET MVC alongside Angular

What is the best way to click on a particular button without activating every button on the page?

Is it possible to modify the Angular global error handler to accept additional parameters besides just the error object?

The connection named "default" was not located

Isotope: Real-time JSON content extracted from Google Spreadsheet

Retrieve a collection of nested dictionaries containing flask and angular data

Guide to duplicating a json file using the webpack duplication tool and integrating the version from the package.json file

Python Scrap Data Project

A class in Typescript containing static methods that adhere to an interface with a string index

Transferring JSON data using AJAX

Conceal the absence of a value within an array

I'm curious about the type I can set for the first parameter of setState in TypeScript. Is there a way to pass a dynamically generated state object to setState?

What are the best methods for encoding and decoding query parameters?