CODEWITHSUNDEEP
jsonangularionic-framework
coderrrrrr
coderrrrrr

Reputation: 17

Angular outputting JSON

I want to output only the short_title from "id": 28 but I am unusure how to just call the title from all the JSON and then output it in Angular within a HTML page.

  {
    "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",

I want to just output this short title

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

Upvotes: 0

Views: 54

Answers (2)

LLai
LLai

Reputation: 13396

If you don't know what index id: 28 is at, you can use the find method.

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

Then display it in your html

{{shortTitle}}

Note: find is an es6 function, so you'll need to add a polyfill

Upvotes: 0

Gowtham
Gowtham

Reputation: 3233

try data.content[1].short_title

in HTML,

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

Upvotes: 1

Related Questions