Krishnan Sriram Krishnan Sriram - 3 months ago 11
TypeScript Question

Read a simple JSON object in typescript

Here's a simple JSON structure

{
"carousel": [],
"column-headers": [{
"header": "Heading",
"text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.",
"headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
"buttonText": "View details"
}, {
"header": "Heading",
"text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.",
"headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
"buttonText": "View details"
}, {
"header": "Heading",
"text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.",
"headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
"buttonText": "View details"
}]
}


How do I read this in Typescript? I would like to do it typically the way other high-level languages do, like load it and treat it like a dictionary that I can query anytime. Alternatively, if I have to do it only through serialization and deserialization techniques, I am fine with that too.

Answer

Typescript isn't different from javascript in how you treat json data.
If you get the json as a string then you need to parse it:

let json = JSON.parse(JSON_STRING);

The parsed data is then just a javascript object (in case the json is a json object {...}) on which you can:

let aHeader = json["column-headers][0];
let headerImage = aHeader.headerImage;

What typescript adds is the ability to declare this json structure as a type:

interface ColumnHeader {
    header: string;
    text: string;
    headerImage: string;
    buttonText: string;
}

interface MyData {
    carousel: any[];
    "column-headers": ColumnHeader[];
}

let o = {
    "carousel": [],
    "column-headers": [{
        "header": "Heading",
        "text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.",
        "headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
        "buttonText": "View details"
    }, {
        "header": "Heading",
        "text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.",
        "headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
        "buttonText": "View details"
    }, {
        "header": "Heading",
        "text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.",
        "headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
        "buttonText": "View details"
    }]
} as MyData;

let header = o["column-headers"][0]; // typeof header is ColumnHeader
let image = header.headerImage; // typeof image is string

(code in playground)