How to pass json data through ajax in Angular Js

Question

I am new to Angular js and i wanted to pass one static json file through ajax and i am giving the codes below.How to Display the data of json file into the index file that i dont know. As i am new to angularjs please help me with these

Index.php

<body ng-app="Mymodule">
    <div ng-controller="recordscontroller">
        <table style="width:500px; border:solid 2px #CCC;">
            <thead>
                <tr style="text-align:left;">
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Gender</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="emp in employee | orderBy : '-salary'">
                    <td>{{ emp.firstname }}</td>
                    <td>{{ emp.lastname }}</td>
                    <td>{{ emp.gender }}</td>
                    <td>{{ emp.salary | currency: 'Rs' }}</td>
                </tr>
            </tbody>
        </table>
    </div> <br>
</body>

Script.js

var app = angular.module("Mymodule",[]);

    app.controller("recordscontroller", function($scope, $http){
        var url = "data/records.json";
        $http.get(url).success(function (response){
        $scope.employee = response;
        });
    });

records.json

[
    {
        "firstname":"Kishan",
        "lastname":"Dalsania",
        "gender":"Male",
        "salary":15000
    },
    {
        "firstname":"Dipesh",
        "lastname":"Mungara",
        "gender":"Male",
        "salary":20000
    },
    {
        "firstname":"Roshan",
        "lastname":"Trivedi",
        "gender":"Male",
        "salary":25000
    },
    {
        "firstname":"Jay",
        "lastname":"Dalsania",
        "gender":"Male",
        "salary":30000
    },
]

How? Can you help me out by showing the code? just as an example. — Kishan Dalsania
– Kishan Dalsania, Commented Jan 4, 2017 at 12:11
ignore the syntax error in your json? pre-last line }, -> } — Xandrios93
– Xandrios93, Commented Jan 4, 2017 at 12:13
TypeError: dbg is undefined I am getting these type of error in console — Kishan Dalsania
– Kishan Dalsania, Commented Jan 4, 2017 at 12:14
jsfiddle.net/Mephiztopheles/qwd0y1pa wihout request, there is no error, except your syntax in your json file -- btw that seems not to cause the problem, i added the , too — Xandrios93
– Xandrios93, Commented Jan 4, 2017 at 12:15

Xandrios93 · Accepted Answer · 2017-01-04 12:23:26Z

1

Your JSON is not valid JSON.

If you check this version
https://jsfiddle.net/Mephiztopheles/qwd0y1pa
and this
https://jsfiddle.net/Mephiztopheles/qwd0y1pa/1/
JSON.parse('[{"firstname":"Kishan", "lastname":"Dalsania","gender":"Male","salary":15000},{ "firstname":"Dipesh", "lastname":"Mungara", "gender":"Male","salary":20000},{ "firstname":"Roshan", "lastname":"Trivedi", "gender":"Male", "salary":25000 }, { "firstname":"Jay", "lastname":"Dalsania", "gender":"Male", "salary":30000},]')

you will see

answered Jan 4, 2017 at 12:23

Xandrios93

2,3251 gold badge15 silver badges28 bronze badges

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

2 Comments

Kishan Dalsania Over a year ago

Ok it worked. Thanks for help :) Is there any problem with request type? Without request it is working perfectly.

Xandrios93 Over a year ago

no, normally the xhtmlrequest detects which content-type the response is. javascript can parse the incorrect , but JSON doesn't

Collectives™ on Stack Overflow

How to pass json data through ajax in Angular Js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related