angularjs doesn't show json data with http.get

Question

i need to show json data in a table, and i used the http.get function to retreive json data but i don't be able to show them.

i've tried this but not working:

HTML:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" />
        <script>
            myApp = angular.module('myApp', [])
            myApp.controller('myController', function($scope, $http){
                $http.get('data.json').success(function(response){
                    $scope.myData = response;
                });
                $scope.removeName = function(row) {
                    $scope.myData.splice($scope.myData.indexOf(row),1)
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        Search: <input type="text" value="" ng-model="search" /><br><br>
        <table border=1>
            <tr ng-repeat = "Data in myData | filter : search">
                <td>{{myData.name}}</td>
                <td>{{myData.company}}</td>
                <td><a href="" ng-click="removeName(data)">Remove</a></td>
            </tr>
        </table>
    </body>
</html>

JSON:

[
 {"name":"Steve Jobs", "company":"Apple"},
 {"name":"Larry Page", "company":"Google"},
 {"name":"Bill Gates", "company":"Microsoft"},
 {"name":"Larry Ellison", "company":"Oracle"},
 {"name":"Sergey Brin", "company":"Google"},
 {"name":"Steve Wozniak", "company":"Apple"}

]

CONSOLE ERROR:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A21%3A179)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:6:412
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:40:222
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
    at cb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:43:336)
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:20:390)
    at Bc (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:21:179)
    at fe (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:20:1)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:317:386
    at HTMLDocument.b (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:189:487)

Can someone help me to solve this error? Thank's

Pirozek · Accepted Answer · 2016-11-16 11:28:55Z

4

Yo, you are repeating myData into Data property, but you are outputing myData :)

<tr ng-repeat = "Data in myData | filter : search">
            <td>{{Data.name}}</td>
            <td>{{Data.company}}</td>
            <td><a href="" ng-click="removeName(Data)">Remove</a></td>
        </tr>

Try this, notice the change I made in {{ }}

Ok, this is working code - https://plnkr.co/edit/dLei9iIM9ddfBAjoAytZ I just replaced your angular with 1.5.6 and its working.

edited Nov 16, 2016 at 11:28

answered Nov 16, 2016 at 9:48

Pirozek

1,2804 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Edoardo Over a year ago

thank's but also with this modification the result didn't change, in output i have only one line with print "Data.name", "Data.company" and "Remove"

Pirozek Over a year ago

Can you please paste the data set your ajax call is returning? Also is there any error in your console?

Edoardo Over a year ago

yes i've an error in the console at file angular.js and it is this: Uncaught Error: [$injector:modulerr] errors.angularjs.org/1.2.26/$injector/……gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A17%3A415)(…)

Pirozek Over a year ago

Well that error is a problem :) First of all, is there specific need to use angular 1.2 over like 1.5? And please paste the whole error into question

Edoardo Over a year ago

no, now i use angular 1.5.8 and the error is the same and i posted it in the question

|

Collectives™ on Stack Overflow

angularjs doesn't show json data with http.get

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related