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 ?

Answer 1

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