Problem consuming JSON with Angularjs

Asked

Viewed 278 times

-1

I’m trying to run a test to get the data from a JSON file but I’m not getting it.

app.component.html

</div><div ng-app="appCursos" ng-controller="meusCursos">
  <ul>
     <p> {{ cursos.id }}</p> 
  </ul>
</div>

json

{"id":7006,"content":"Hello, World!"}

app.curso.js

angular.module("appCursos").controller("meusCursos", function ($scope, $http) {
  var cursos = [];

  var baseUrl = 'http://rest-service.guides.spring.io/greeting';

  $http.get(baseUrl).then(function (response) {
    $scope.cursos = response.data;

  })
});

aparece este erro

javascript angularjs json angular
  • 1

    Angularjs or Angular 5?

  • And your model, it has how to show?

  • Paula, recommend you to do the Tour to learn how the community. Your question says you’re having trouble consuming JSON in Angular 5, but your code is Angularjs. You can edit your question and clarify better which version is using, you can also access the topic How to ask a good question?

  • From what the error shows, there is no column id of the courses object, check the returned json with a console.log($Scope.courses), add this json to the question.

1 answer

1

I could not replicate the error message you got with your code but an error Injecting. When I fixed the problem, I was able to read the JSON:

<!doctype html>
<html>  
    <head>
        <meta charset="utf-8">
    </head>
    <body ng-app="appCursos">
        <div ng-controller="meusCursosController as meusCursos">
            <ul>        
                <p>{{ cursos.id }}</p>
                <p>{{ cursos.content }}</p>
            </ul>       
        </div>  
        <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.8/angular.min.js"></script> <script>
angular.module('appCursos', [])
        .controller("meusCursosController", ['$http', '$scope', function($http,$scope) {

            var baseUrl='http://rest-service.guides.spring.io/greeting';

            $http.get(baseUrl).then(function(result) {
                $scope.cursos = result.data;
            });

        }]);
        </script>
    </body>
</html>

It is necessary to put both $http when $Scope within the control.

Another alternative would be not to use $Scope and work with the this to access/create/attributes from/in the control itself:

var baseUrl = #...;
meusCursos = this;
meusCursos.cursos = [];
# ...
    meusCursos = result.data;
# ...

And then access them in HTML as meusCursos.cursos.id and meusCursos.cursos.content.

  • I followed the steps put $http and $Scope and keep getting the same error

  • Try this example of mine in Firefox but in Chromium it complained about some things, fixed the problem (it was outside the program) and it started working. My example is in Angularjs 1.6.8 and I believe you are using Angular 2, correct?

  • I am using version 1.6.9

  • Saving the code I pasted into the reply in an HTML file and opening it in the browser (Chrome, Firefox etc), gives the same error?

  • yes. I tried examples without reading files and the same thing is happening. I think it’s some problem with the angular, it seems that the expressions and directives are not being recognized

  • i followed this example (http://spring.io/guides/gs/consuming-rest-angularjs/) by creating the project with "ng new my-app". I modified the index.html file according to your answer. The errors are the same.

  • I took the example of the Spring people and it works when run directly by the browser, this is, firefox hello.html both versions 1.4.3 (original example) and 1.6.8 (latest version of the 1.x series). But you said you’re using "ng new ...", that’s not Angular 2?

Show 2 more comments

Browser other questions tagged javascript angularjs json angular

You are not signed in. Login or sign up in order to post.