Converting JSON array to custom object array in TypeScript

Question

Converting JSON array to custom object array in TypeScript

As a newcomer to this area, please excuse any inaccuracies in my language. Don't hesitate to ask for more details if needed.

I currently have some TypeScript interfaces:

export interface Item {
    id: string
    type: string
    state: string
}

export interface ItemResponse {
    someData1: string
    someData2: string
    itemListResponse: Array<Item> // essentially a JSON string containing serialized Items in an array
}

The ItemResponse is being populated through a fairly successful call to an external service:

The outcome is a series of ItemResponses. For now, let's assume the size of the ItemResponse array is 1, although there are multiple Items within the itemListResponse array.

The itemListResponse is essentially just a JSON string:

"[{"id":"blah", "type":"blah", ...}, {"id":"blah2",.... },...]"

How can I convert this into an array of Items?

I believe I understand how to parse from JSON to a single object, but I'm uncertain about managing arrays.

javascript typescript

Answer 1

Answer №1

@SteveSmith42 is right - you need to utilize JSON.parse for this task. A simple example would look like this:

dataArray =  "[{"id":"example1", "type":"example1", ...}, {"id":"example2",.... },...]"
<Item[]> JSON.parse(dataArray)

Of course, this code lacks validation of the response, which is not recommended. It is advisable to add some form of data validation:

dataArray =  "[{"id":"example1", "type":"example1", ...}, {"id":"example2",.... },...]"

var output;
try {
   itemListData = <Item[]>JSON.parse(dataArray);

   if(!itemListData.has("id") ||
      !itemListData.has("type") ||
      !itemListData.has("state")){

      throw "Invalid Item";
   }
} catch (error){

}

Alternatively, consider using a JSON Schema validator such as ajv.

Answer 2

@SteveSmith42 is right - you need to utilize JSON.parse for this task. A simple example would look like this:

dataArray =  "[{"id":"example1", "type":"example1", ...}, {"id":"example2",.... },...]"
<Item[]> JSON.parse(dataArray)

Of course, this code lacks validation of the response, which is not recommended. It is advisable to add some form of data validation:

dataArray =  "[{"id":"example1", "type":"example1", ...}, {"id":"example2",.... },...]"

var output;
try {
   itemListData = <Item[]>JSON.parse(dataArray);

   if(!itemListData.has("id") ||
      !itemListData.has("type") ||
      !itemListData.has("state")){

      throw "Invalid Item";
   }
} catch (error){

}

Alternatively, consider using a JSON Schema validator such as ajv.

Converting JSON array to custom object array in TypeScript

Answer №1

Similar questions

Sequence of HTML elements arranged in a stack

Vue Router is failing to match a URL that contains numerous dynamic parameters

Organize library files into a build directory using yarn workspaces and typescript

Utilizing the Django object array in AngularJS – a comprehensive guide

The request to http://localhost:8080 from http//:localhost:3000 has been restricted due to CORS policy blocking access. This is due to the absence of the 'Access-Control-Allow-Origin' header in the

What is the best way to switch routes in redux saga upon successful login?

Error: jQuery Validation not triggering in Bootstrap modal window

Retrieving the output of a parent computed method in VueJS, using a child component

Saving an array of key-value pairs in local storage

Postman grants me the cookie, yet Chrome doesn't seem to deliver it

Creating a dynamic canvas with a three-dimensional model using three.js: A step-by-step guide

Working towards ensuring my website is responsive

The property is returning an empty string, but the function is functioning perfectly

Error message: "No elements were found in Ember.js jQuery cycle slideshow"

restrict the maximum character count in regex

The issue of a false value not being correctly matched in Jasmine is causing problems

Trying to utilize RegEx for my project, but feeling stuck on how to solve my problem

Issue with selecting a value in React MUI and default value not being defined

Why do we often encounter a "SyntaxError: Unexpected token ;" error when a seemingly normal semicolon is present in distribution files?

Retrieving user input in a JavaScript/React app