Getting value from JSON object with Angular

Question

I've been trying to learn AngularJS recently, and hit a bump in the road with Localstorage i spend so many hours trying to make it save locally, I think that it's working as it should now, but now i would like to print out the data saved local from the JSON array, how can i go about that?

EDIT:

A bit of clarification, What im trying to achieve is getting the information i save in the localstorage out onto the website as a string, so it's readable. hope i'ts more understandable. Thanks in advance

My view.

<ion-list>
  <div >
        <ion-item ng-controller='ModalEditCtrl' ng-click="openModal()">
              <div class="thumbnail" style="border:1px black solid">
          </div>
          <div  ng-controller="createPerson"  class="contactinfo" >
            <li ng-repeat="contact in contactdetail.contactinfo">  {{contact.name}} </li>
          </div>

        </ion-item>

  </div>

  <div ng-controller="ModalAddCtrl">
    <button type="button" ng-click="openModal()">+++</button>
  </div>

</ion-list>

My controller

app.controller('createPerson', function ($scope) {
  var id = id_counter = 1;
  $scope.editorEnabled = false;
      $scope.disableEditor = function() {
        $scope.editorEnabled = false;
      };
      $scope.enableEditor = function() {
        $scope.editorEnabled = true;
      };
  $scope.contactinfo = [
    {name: 'test', phone: 1231, email: 'asd@asd.com'}
  ];
  $scope.saveData = function () {
    id_counter += 1;
    $scope.editorEnabled = false;
    $scope.contactinfo.push({
      name: $scope.contactName,
      phone: $scope.contactPhone,
      email: $scope.contactEmail,
      sort_id: id_counter
    });
    //$scope.todoText = ''; //clear the input after adding
    localStorage.setItem('contactinfo', JSON.stringify($scope.contactinfo));
  //  localStorage.setItem("contacts", JSON.stringify(contacts));

  }
  $scope.loadData = function () {
    var contacts = localStorage.getItem("contactinfo");
    var contactdetail = JSON.parse(contacts); //
    console.log(contactdetail);

  }
  $scope.clearData = function () {
    window.localStorage.clear();

  }
});

Answer 1

Angular has wrapper for window, which should be used inside your code. There is also ngStorage module or many available solutions which are dealing with browser storage in Angular way. Moreover Angular has functions like angular.toJson() and angular.fromJson() . If eg jsonObj is JSON array then var obj = angular.fromJson(jsonObj) gives you JavaScript array. If jsonObj has array property inside then you should go with: var jsArray = angular.fromJson(jsonObj).array .

Answer 2

Your question is not very clear, I dont think you will be able to get much help unless you clean it up a little.

To print out the data (for debugging, usually) you could just add {{contactinfo|json}} somewhere in your html.

To actually display the data for use on the webpage the following should work for you.

<div ng-repeat="contact in contactinfo track by $index">
    <div>Name: {{contact.name}}</div>
    <div>Phone: {{contact.phone}}</div>
    <div>Email: {{contact.email}}</div>
</div>

I think that some of that logic might be better split into a factory, too. Something like this maybe...?

var contactFactory = angular.module('contactFactory', []);

contactFactory.factory('contactInfo', ['$window', function ($window) {
    var id = id_counter = 1;
    var contacts = [];

    function addContact(name, phone, email) {
        id_counter += 1;
        contacts.push({
          name: name,
          phone: phone,
          email: email,
          sort_id: id_counter
        });
        saveData();
    }

    function saveData(contactInfo) {
        $window.localStorage.setItem('contactinfo', angular.fromJson(contacts));
    }

    function loadData() {
        contacts = angular.toJson($window.localStorage.getItem('contactinfo'));
        return contacts;
    }

    function clearData() {
        $window.localStorage.removeItem('contactinfo');
    }

    return {
        addContact: addContact,
        saveData: saveData,
        loadData: loadData,
        clearData: clearData
    };
}]);

var app = angular.module('yourAppName', ['contactFactory']);

app.controller('createPerson', ['$scope', 'contactInfo', function ($scope, contactInfo) {
  $scope.editorEnabled = false;
      $scope.disableEditor = function() {
        $scope.editorEnabled = false;
      };
      $scope.enableEditor = function() {
        $scope.editorEnabled = true;
      };

  $scope.contactinfo = [
    {name: 'test', phone: 1231, email: 'asd@asd.com'}
  ];

  $scope.saveData = function () {
    contactInfo.addContact($scope.contactName, $scope.contactPhone, $scope.contactEmail);
    $scope.editorEnabled = false;
  }
  $scope.loadData = contactInfo.loadData;
  $scope.clearData = contactInfo.clearData;
}]);