AngularJS — JSON

JSON Filter

<pre>{{data | json}}</pre>

Parsing JSON

// In controller
$scope.data = JSON.parse(jsonString);

Displaying JSON

<div ng-repeat="(key, value) in data">
  <strong>{{key}}:</strong> {{value}}
</div>

JSON in Services

app.factory('DataService', function($http) {
  return {
    getData: function() {
      return $http.get('/api/data').then(function(response) {
        return response.data;
      });
    },
    postData: function(data) {
      return $http.post('/api/data', data);
    }
  };
});

JSON with Forms

$scope.submitForm = function() {
  $http.post('/api/submit', $scope.formData)
    .then(function(response) {
      console.log('Success:', response.data);
    });
};

Mini Practice

1. Display JSON data
2. Parse JSON strings
3. Send JSON in requests
4. Display nested objects

Up Next

Continue with Cookies — AngularJS cookies.