2

Estou tentando imprimir os dados de um arquivo JSON no html usando AngularJS, rodando tudo pelo XAMPP e na minha pasta htdocs/teste tem 3 arquivos (index.html, main.js, teste.json). O console não mostra nenhum erro, tentei inclusive debugar pelo firefox, coloquei um breakpoint no $http.get, mas nunca chega nesse ponto. Segue o código JS:

var app = angular.module('myApp', []);
app.controller("myCtrl", function ($http, $scope) {
    $http.get('teste.json').then(function (response) {
        $scope.myData = response;
    });
});

JSON:

[{"id":"1","name":"John"},
 {"id":"2","name":"Paul"}] </br/>

HTML:

<ul>
    <li ng-repeat="data in myData">
        {{data.id}}
        {{data.name}}
    </li>
</ul>
7
  • Na aba de network no developer tools o http é corrido?
    – Sergio
    21/05/2016 às 12:47
  • Recebe status 200, então imagino que sim Sergio
    – clr19
    21/05/2016 às 14:40
  • Não entendo muito de angular, mas até onde sei tem, precisa definir os services que faz as requisições ajax e consegue enviar para a controller com os $scope's 21/05/2016 às 14:46
  • @clr19 dá para vêr a resposta desse 200 também?
    – Sergio
    21/05/2016 às 15:00
  • Interessante está recebendo o status 200 mas não está parando no breakpoint
    – heat
    21/05/2016 às 17:48

1 Resposta 1

1

A resposta da requisição, injetada na variável response, não contém a lista de valores que você espera. Segundo a documentação disponível em https://docs.angularjs.org/api/ng/service/$http:

The response object has these properties:

  • data – {string|Object} – The response body transformed with the transform functions.
  • status – {number} – HTTP status code of the response.
  • headers – {function([headerName])} – Header getter function.
  • config – {Object} – The configuration object that was used to generate the request.
  • statusText – {string} – HTTP status text of the response.

Sendo assim, acredito que seu controller deveria ser assim:

app.controller("myCtrl", function ($http, $scope) {
    $http.get('teste.json').then(function (response) {
        $scope.myData = response.data;
    });
});

Se preferir, utilize console.log para verificar a resposta:

console.log(response);

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 .