在 typescript 中读取一个简单的 JSON 对象答案

【问题标题】：Read a simple JSON object in typescript在 typescript 中读取一个简单的 JSON 对象
【发布时间】：2016-12-28 11:14:07
【问题描述】：

这是一个简单的 JSON 结构

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

如何在 Typescript 中阅读此内容？我想像其他高级语言那样做，比如加载它，把它当作我可以随时查询的字典。或者，如果我只能通过序列化和反序列化技术来完成，我也可以。

【问题讨论】：

我们需要更多细节 - 这个 JSON 来自哪里？我假设你有它作为一个字符串，对吗？
您可以使用标准 JavaScript 对象访问技术（例如 object["column-headers'][0].header）“阅读”它。如果它真的是 JSON（它是一个字符串），那么首先用 object = JSON.parse(json); 解析它。这在 TypeScript 中与在标准 JS 中没有什么不同。

标签： javascript json typescript

【解决方案1】：

Typescript 在处理 json 数据方面与 javascript 没有什么不同。
如果您将 json 作为字符串获取，则需要对其进行解析：

let json = JSON.parse(JSON_STRING);

解析后的数据只是一个 javascript 对象（如果 json 是 json 对象{...}），您可以：

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

typescript 增加的是将这个 json 结构声明为类型的能力：

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)

【讨论】：

感谢您的快速回复@Nitzan Tomer