AngularJS:How to read data from the json file using angular

Question

We are using JQuery ajax to read json data and convert into object.

jQuery script

 $.ajax({
        type: "GET",
        dataType: 'json',
        url: 'data.json',
        converters:
    {
        "text json": function (data) {
            return $.parseJSON(data);
        }
    },
        success: function (data) {
            self.jsonData = data;
        }
    });

data.json

[{
   "Name" : "Task 1",
   "ID" : 1,
   "StartTime" : "2014-02-02T00:00:00Z",
   "Effort" : "8:00:00",
   "Description" : "Description of Task 1"
 }, 
 {
   "Name" : "Task 2",
   "ID" : 2,
   "PredecessorIndices" : "1",
   "StartTime" : "2014-02-03T00:00:00Z",
   "Effort" : "16:00:00",
   "Description" : "Description of Task 2"
  }, 
  {
   "Name" : "Task 3",
   "ID" : 3,
   "StartTime" : "2014-02-02T00:00:00Z",
   "Effort" : "1.12:30:00",
   "ProgressPercent" : 90,
   "Description" : "Description of Task 3"      
 }]

Here converting date string into Jsdate object like this:Json Date Parsing

How to read json data and parsing the json date string into a Jsdate object using angularjs ?

your question is not much clear. – Kalhan.Toress Oct 14 '14 at 06:31 — Kalhan.Toress, Oct 14 '14 at 06:31
we need to parse the json data in angular – Sindhu Oct 14 '14 at 06:35 — Sindhu, Oct 14 '14 at 06:35

score 5 · Accepted Answer · edited May 23 '17 at 11:45

First of all try not to mix JQuery with AngularJS.

If you want to get json file, instead of JQuery-Ajax use AngularJS $http service like as shown below, and for converting into date object you can use Date.parse

 $scope.self = {};
  $http.get('data.json').success(function(data) {
    $scope.self.jsonData = data;
    $scope.self.jsonData.forEach(function(value, key) {
      value.StartTime = Date.parse(value.StartTime); // converting into date
    });
  });

In Html

<tr ng-repeat="arr in self.jsonData">
  <td>
      {{arr.StartTime |date: 'yyyy-MM-dd'}}
  </td>
</tr>

Working Demo

AngularJS:How to read data from the json file using angular

1 Answers1