TypeScript - how to parse JSON array into array of custom objects

Question

I'm relatively new to this space, so apologies if I'm using some of the wrong terminology. Feel free to ask for clarification.

I have some typescript interfaces:

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

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

The ItemResponse is populated when calling an external service (somewhat) correctly:

The result is an of ItemResponses. For now, say the size of the ItemResponse array is 1, but that there are multiple Items in the itemListResponse array.

The itemListResponse is actually just a json string:

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

How would I convert this into an Array of Item?

I think I'm familiar with parsing from JSON to a single object, but not how to do this with an array.

you could start by making your title meaningful - but you might want JSON.parse to parse JSON — Jaromanda X
– Jaromanda X, Commented Nov 1, 2017 at 3:45

Derek Brown · Accepted Answer · 2020-12-25 20:41:58Z

17

@Jaromanda X is correct- you are looking for JSON.parse. Something like this would suffice:

responseArray =  "[{"id":"blah", "type":"blah", ...}, {"id":"blah2",.... },...]"
<Item[]> JSON.parse(responseArray)

Obviously, this doesn't do any validation of the response (which is bad practice). You should ideally perform some validation of the result:

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

var result;
try {
   itemListResponse = <Item[]>JSON.parse(responseArray);

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

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

}

Or, alternatively, use a JSON Schema validator like ajv.

edited Dec 25, 2020 at 20:41

answered Nov 1, 2017 at 4:24

Derek Brown

4,4575 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript - how to parse JSON array into array of custom objects

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related