Angular JS multidimensional JSON

Question

I'm new to AngularJS, this feels like a simple thing but I'm struggling with it.

I have the following JSON response, and I just want to output some of it to the page.

For the title, I can't use post.title.rendered I think because post is a separate object? Is there another way I can output the title?

Thanks for any help!

{
   "post":[
      {
         "id":14,
         "date":"2015-10-08T12:34:37",
         "guid":{
            "rendered":"http://localhost:8888/tf-stories-wp/?p=14"
         },
         "modified":"2015-10-08T13:13:56",
         "modified_gmt":"2015-10-08T12:13:56",
         "slug":"story",
         "type":"post",
         "link":"http://localhost:8888/tf-stories-wp/2015/10/08/story/",
         "title":{
            "rendered":"Story"
         },
         "content":{
            "rendered":"&lt;p&gt;Goooooooooods&lt;/p&gt;\n"
         },
         "excerpt":{
            "rendered":"&lt;p&gt;Goooooooooods&lt;/p&gt;\n"
         },
         "author":1,
         "featured_image":0,
         "comment_status":"open",
         "ping_status":"open",
         "sticky":false,
         "format":"standard",
         "_tf-stories_demo":[
            {
               "page_text":"Test page content",
               "page_image_id":0,
               "page_image":false
            },
            {
               "page_text":"Test page content 2"
            }
         ],
         "_links":{
            "self":[
               {
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/posts/14"
               }
            ],
            "collection":[
               {
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/posts"
               }
            ],
            "author":[
               {
                  "embeddable":true,
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/users/1"
               }
            ],
            "replies":[
               {
                  "embeddable":true,
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/comments?post_id=14"
               }
            ],
            "version-history":[
               {
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/posts/14/revisions"
               }
            ],
            "http://v2.wp-api.org/attachment":[
               {
                  "embeddable":true,
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/media?post_parent=14"
               }
            ],
            "http://v2.wp-api.org/term":[
               {
                  "taxonomy":"category",
                  "embeddable":true,
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/posts/14/terms/category"
               },
               {
                  "taxonomy":"post_tag",
                  "embeddable":true,
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/posts/14/terms/tag"
               },
               {
                  "taxonomy":"post_format",
                  "embeddable":true,
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/posts/14/terms/post_format"
               }
            ],
            "http://v2.wp-api.org/meta":[
               {
                  "embeddable":true,
                  "href":"http://localhost:8888/tf-stories-wp/wp-json/wp/v2/posts/14/meta"
               }
            ]
         }
      }
   ]
}

Kirill Husiatyn · Accepted Answer · 2015-10-08 12:49:50Z

2

use post[0].title.rendered instead of post.title.rendered because post - is an array

answered Oct 8, 2015 at 12:49

Kirill Husiatyn

8382 gold badges12 silver badges21 bronze badges

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

1 Comment

user3429445 Over a year ago

Ahh yes, I knew it would be something obvious! Thank you.

Tim · Accepted Answer · 2015-10-08 12:48:27Z

2

post actually is an array, and title is an object in the only object in that array.
A better representation (I think, given the current data) would be to make post an object instead of an array (so lose the [ ]).

For the current situation, this should work:

var title = json_object['post'][0]['title']['rendered'];

or (same thing, different notation)

var title = json_object.post[0].title.rendered;

answered Oct 8, 2015 at 12:48

Tim

43.6k19 gold badges138 silver badges152 bronze badges

Comments

Jax · Accepted Answer · 2015-10-08 12:54:46Z

2

You can do:

<div ng-repeat='post in posts'>
  id: {{post[0].id}}<br/>
  address: {{post[0].guid.rendered}}
</div>

and so on.

take a look at this plunkr

hope it helps.

answered Oct 8, 2015 at 12:54

Jax

1,8373 gold badges18 silver badges30 bronze badges

1 Comment

user3429445 Over a year ago

Thanks, I had tried this but had the syntax slightly wrong. You've cleared that up for me.

Collectives™ on Stack Overflow

Angular JS multidimensional JSON

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related