Access different objects from a Json with Angularjs

Question

I need to list all the "posts" of this Json, but I’m not sure how to access it.

I’m trying like this:ng-repeat="post in posts" but it returns me only one information, because I need to access the object "posts". I have tried to use one ng-repeat in a superior div to be able to perform the ng-repeat again with the parameter I want to access but it didn’t work either. Some light to have the "posts" in my ng-repeat?

{
   "status":"ok",
   "count":10,
   "count_total":54,
   "pages":6,
   "posts":[
      {
         "id":2625,
         "type":"post",
         "slug":"uma-feliz-pascoa-para-voce",
         "url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/",
         "status":"publish",
         "title":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "date":"2016-03-25 14:38:54",
         "modified":"2016-03-25 14:38:54",
         "categories":[
            {
               "id":185,
               "slug":"noticia-2",
               "title":"Not\u00edcia",
               "description":"",
               "parent":0,
               "post_count":27
            }
      },

      {
         "id":2626,
         "type":"post",
         "slug":"uma-feliz-pascoa-para-voce",
         "url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/",
         "status":"publish",
         "title":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "date":"2016-03-25 14:38:54",
         "modified":"2016-03-25 14:38:54",
         "categories":[
            {
               "id":185,
               "slug":"noticia-2",
               "title":"Not\u00edcia",
               "description":"",
               "parent":0,
               "post_count":27
            }
      },

      {
         "id":2627,
         "type":"post",
         "slug":"uma-feliz-pascoa-para-voce",
         "url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/",
         "status":"publish",
         "title":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "date":"2016-03-25 14:38:54",
         "modified":"2016-03-25 14:38:54",
         "categories":[
            {
               "id":185,
               "slug":"noticia-2",
               "title":"Not\u00edcia",
               "description":"",
               "parent":0,
               "post_count":27
            }
      }
   ],
   "query":{
      "ignore_sticky_posts":true,
      "posts":""
   }
}

Answer 1

A small adjustment in the collection setting categories of each item corrects its JSON, allowing the angular to correctly interpret the object.

Click on Execute code snippetto see it working:

function SampleController($scope) {
  
  $scope.data = {"status":"ok","count":10,"count_total":54,"pages":6,"posts":[{"id":2625,"type":"post","slug":"uma-feliz-pascoa-para-voce","url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/","status":"publish","title":"Uma feliz p\u00e1scoa para voc\u00ea!","title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!","content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n","excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n","date":"2016-03-25 14:38:54","modified":"2016-03-25 14:38:54","categories":[{"id":185,"slug":"noticia-2","title":"Not\u00edcia","description":"","parent":0,"post_count":27}]},{"id":2626,"type":"post","slug":"uma-feliz-pascoa-para-voce","url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/","status":"publish","title":"Uma feliz p\u00e1scoa para voc\u00ea!","title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!","content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n","excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n","date":"2016-03-25 14:38:54","modified":"2016-03-25 14:38:54","categories":[{"id":185,"slug":"noticia-2","title":"Not\u00edcia","description":"","parent":0,"post_count":27}]},{"id":2627,"type":"post","slug":"uma-feliz-pascoa-para-voce","url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/","status":"publish","title":"Uma feliz p\u00e1scoa para voc\u00ea!","title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!","content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n","excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n","date":"2016-03-25 14:38:54","modified":"2016-03-25 14:38:54","categories":[{"id":185,"slug":"noticia-2","title":"Not\u00edcia","description":"","parent":0,"post_count":27}]}],"query":{"ignore_sticky_posts":true,"posts":""}};
}

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="SampleController">

      <table>
        <tr ng-repeat='i in data.posts'>
          <td>{{i.id}}</td>
          <td>{{i.slug}}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Answer 2

Your Json has syntax errors

    {
   "status":"ok",
   "count":10,
   "count_total":54,
   "pages":6,
   "posts":[
      {
         "id":2625,
         "type":"post",
         "slug":"uma-feliz-pascoa-para-voce",
         "url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/",
         "status":"publish",
         "title":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "date":"2016-03-25 14:38:54",
         "modified":"2016-03-25 14:38:54",
         "categories":[
            {
               "id":185,
               "slug":"noticia-2",
               "title":"Not\u00edcia",
               "description":"",
               "parent":0,
               "post_count":27
            }
            ]
      },{
         "id":2626,
         "type":"post",
         "slug":"uma-feliz-pascoa-para-voce",
         "url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/",
         "status":"publish",
         "title":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "date":"2016-03-25 14:38:54",
         "modified":"2016-03-25 14:38:54",
         "categories":[
            {
               "id":185,
               "slug":"noticia-2",
               "title":"Not\u00edcia",
               "description":"",
               "parent":0,
               "post_count":27
            }
            ]
      },

      {
         "id":2627,
         "type":"post",
         "slug":"uma-feliz-pascoa-para-voce",
         "url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/",
         "status":"publish",
         "title":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "date":"2016-03-25 14:38:54",
         "modified":"2016-03-25 14:38:54",
         "categories":[
            {
               "id":185,
               "slug":"noticia-2",
               "title":"Not\u00edcia",
               "description":"",
               "parent":0,
               "post_count":27
            }
            ]
      }
   ],
   "query":{
      "ignore_sticky_posts":true,
      "posts":""
   }

To Show for example Title: in html page you can do as follows:

 <ul ng-repeat="post in posts.posts">
<li> Title: {{post.title}}</li>
</ul>

Answer 3

Your JSON has a syntax error, the correct would be something like this:

var data = {
   "status":"ok",
   "count":10,
   "count_total":54,
   "pages":6,
   "posts":[
      {
         "id":2625,
         "type":"post",
         "slug":"uma-feliz-pascoa-para-voce",
         "url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/",
         "status":"publish",
         "title":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "date":"2016-03-25 14:38:54",
         "modified":"2016-03-25 14:38:54",
         "categories":[
            {
               "id":185,
               "slug":"noticia-2",
               "title":"Not\u00edcia",
               "description":"",
               "parent":0,
               "post_count":27
            }
         ]
      },
      {
         "id":2626,
         "type":"post",
         "slug":"uma-feliz-pascoa-para-voce",
         "url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/",
         "status":"publish",
         "title":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "date":"2016-03-25 14:38:54",
         "modified":"2016-03-25 14:38:54",
         "categories":[
            {
               "id":185,
               "slug":"noticia-2",
               "title":"Not\u00edcia",
               "description":"",
               "parent":0,
               "post_count":27
            }
         ]
      },
      {
         "id":2627,
         "type":"post",
         "slug":"uma-feliz-pascoa-para-voce",
         "url":"http:\/\/flaviovicente.com.br\/uma-feliz-pascoa-para-voce\/",
         "status":"publish",
         "title":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "title_plain":"Uma feliz p\u00e1scoa para voc\u00ea!",
         "content":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "excerpt":"<p>Feliz P\u00e1scoa pessoal! Que Jesus possa ser o centro das comemora\u00e7\u00f5es hoje! Aproveite, descanse, coma chocolate, confraternize com suas fam\u00edlias e seja feliz! Emoticon smile<\/p>\n",
         "date":"2016-03-25 14:38:54",
         "modified":"2016-03-25 14:38:54",
         "categories":[
            {
               "id":185,
               "slug":"noticia-2",
               "title":"Not\u00edcia",
               "description":"",
               "parent":0,
               "post_count":27
            }
         ]
      }
   ],
   "query":{
      "ignore_sticky_posts":true,
      "posts":""
   }
}

And to read the object, you can do so, and see the output on your console:

console.log(data);

Or if you want to see the structure.

console.log(JSON.stringify(data, false, "    "));

And if you want to see some of the data:

 console.log(data.status)
 console.log(data.count)
 console.log(data.count_total)
 console.log(data.pages)
 console.log(data.query.ignore_sticky_posts)
 console.log(data.query.posts)
//etc...
//posts
for (var i in data.posts) {
     console.log(data[i].id)
     console.log(data[i].type)
     console.log(data[i].slug)
     console.log(data[i].url)
     console.log(data[i].title)
    //etc...  
     for (var j in data[i].categories) {
          console.log(data[i].categories[j].id)  
          console.log(data[i].categories[j].slug)   
          console.log(data[i].categories[j].title)
          //etc...  
     }

}

In Angularjs, you can use the repeat clause:

Controller:

var SeuApp = angular.module('SeuApp', [])
  .controller('SeuCtrl', function($scope) {

     $scope.data = { //... aqui seu json ... }
});

View:

 <div ng-app="SeuApp">
     <div>Total: {{data.total}}</div>
      <div ng-controller="SeuCtrl" ng-if="data.status == 'ok'">

                <ul ng-repeat="result in data.posts">
                    <li>ID:     {{result.id}}</li>
                    <li>Título: {{result.title}}</li>
                    <li>URL:    {{result.url}}</li>
                    <li>Status: {{result.status}}</li>
                    <!-- etc... -->
                </ul>

      </div>
    </div>

Adding an example, due to new information: Using the API URL

In HTML, put:

<!DOCTYPE html>
<html ng-app='SeuApp'>
  <head>
   <meta charset="utf-8">
    <title>Exemplo</title>
    <script data-require="angular.js@*" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script>
    <script type="text/javascript">
    var app = angular.module('SeuApp',[]);

    app.factory('seuServico', function($http) {
      return {
        async: function() {
          return $http.get('http://flaviovicente.com.br/api/get_post/?id=2625');
        }
      };  
    });

    app.controller('SeuCtrl', function(seuServico, $scope) {
      seuServico.async().then(function(rtn) {
        $scope.data = rtn;
      })
    });
    </script>
    </head>

    <body>
      <h1>Abaixo exibe os dados</h1>
      <div ng-controller='SeuCtrl'>
          Dados: {{data}}<br>
          Pegando um valor do status: {{data.data.status}}
          Pegando a coleção de post: {{data.data.posts}}
          Fazendo a lista:<br>
               <ul ng-repeat="result in data.data.posts">
                    <li>result.title</li>
                    <li>result.url</li>
                    <!-- //etc... -->
               </ul>
      </div>
  </body>
</html>