CODEWITHSUNDEEP
jsonangularjs
user3429445
user3429445

Reputation: 101

Angular JS multidimensional JSON

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":"<p>Goooooooooods</p>\n"
         },
         "excerpt":{
            "rendered":"<p>Goooooooooods</p>\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"
               }
            ]
         }
      }
   ]
}

Upvotes: 1

Views: 284

Answers (3)

Jax
Jax

Reputation: 1843

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.

Upvotes: 2

Kirill Husiatyn
Kirill Husiatyn

Reputation: 828

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

Upvotes: 2

Tim
Tim

Reputation: 43304

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;

Upvotes: 2

Related Questions