Angular输出JSON

时间:2017-12-05 10:56:17

标签: json angular ionic-framework

我想仅从short_title输出"id": 28但是我 我不知道如何从所有JSON调用标题然后输出 它在HTML页面的Angular中。

  {
    "content": [
    {
        "id": 29,
        "short_title": "Flow",
        "long_title": "Flow",
        "fields": {
            "images": [
                {
                    "src": "content/29/images/QMTQUZxTMCoJMGrjOeowwqChJmnIe4fmFFT7pSph.jpeg",
                    "title": "Flow_2560.jpg"
                }
            ]
        },
        "type_id": 4,
        "folder_id": 3,
        "created_at": "2017-11-28 16:40:12",
        "updated_at": "2017-11-28 16:40:12",
        "type": {
            "id": 4,
            "code": "image-only",
            "title": "Full screen image",
            "visible_fields": [
                "images"
            ],
            "created_at": "2017-08-31 14:22:59",
            "updated_at": "2017-08-31 14:22:59"
        }
    },
    {
        "id": 28,
        "short_title": "Navigation buttons", 

我想输出这个简短的标题

        "long_title": "Nav buttons 21st November",
        "fields": {
            "links": [
                {
                    "icon": "1",
                    "link": "http://sportspecific.digitaltesting.net/",
                    "size": "full",
                    "title": "Button 1",
                    "bg_colour": "#a64343",
                    "link_type": "url"
                },
                {
                    "icon": "2",
                    "link": "http://sportspecific.digitaltesting.net/",
                    "size": "full",
                    "title": "Button 2",
                    "bg_colour": "#742d2d",
                    "link_type": "url"
                }
            ]
        },

2 个答案:

答案 0 :(得分:1)

尝试data.content[1].short_title

HTML中的

{{data.content[1].short_title}}

答案 1 :(得分:0)

如果您不知道索引id: 28是什么,可以使用find方法。

let content = data.content.find(item => item.id === 28);
this.shortTitle = content.short_title;

然后在你的HTML

中显示它
{{shortTitle}}

注意:find是es6函数,因此您需要添加polyfill