1

Preciso listar todos os "posts" deste Json, mas não sei ao certo como acessar isso.

Estou tentando assim:ng-repeat="post in posts" mas ele me retorna apenas uma informação, pois preciso acessar o objeto "posts". Já tentei utilizar um ng-repeat numa div superior para poder em outra realizar o ng-repeat novamente com o parametro que quero acessar mas não funcionou também. Alguma luz para ter o "posts" em meu 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":""
   }
}
1
  • Há um erro de sintaxe, no seu json. Commented 28/03/2016 às 12:50

3 Respostas 3

0

Este teu Json tem erros de sintaxe

    {
   "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":""
   }

Para Mostrar por exemplo os Title: na pagina html pode fazer da seguinte forma:

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

Um pequeno ajuste na definição da coleção categories de cada item corrige o seu JSON, permitindo que o angular interprete corretamente o objeto.

Clique em ► Executar trecho de códigopara vê-lo funcionando:

inserir a descrição da imagem aqui

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>

0

Seu JSON tem um erro de sintaxe, o correto seria algo parecido com isso:

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":""
   }
}

E para ler o objeto, você pode fazer assim, e ver a saída no seu console:

console.log(data);

Ou se quiser ver a estrutura.

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

E se quiser ver parte dos dados:

 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...  
     }

}

No AngularJS, você pode usar a cláusula repeat:

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>

Acrecentando um exemplo, devido à novas informações: Utilizando a URL da API

Na HTML, coloque:

<!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>
4
  • Ivan Ferrer, perfeita sua explicação e aplicação, sabe me dizer porque não consigo imprimir os dados desta api utilizando a mesma lógica que me passou acima? flaviovicente.com.br/api/get_post/?id=2625 Commented 28/03/2016 às 16:37
  • Vou acrescentar na resposta, ok. Commented 30/03/2016 às 12:46
  • Veja que você usou a saída "data:" no JSON, então a variável do scope "data" irá receber a variável "data", ficando "data.data.". Commented 30/03/2016 às 13:18
  • Entendi Ivan, eu até consigo apresentar os dados corridos do Json, mas os itens específicos ainda não. Coloquei seu exemplo no link plnkr.co/edit/bi8MsMuDWlaLqgIQRUEs?p=preview e comentei o ng-repeat. Se puder me ajudar nisso, você já está sendo muito prestativo, muito obrigado. Commented 30/03/2016 às 16:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .