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: '[email protected]'}
  ];
  $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();

  }
});

"...print out the data..." - do you mean to the console log or on your web page? If you mean the console log, it looks like you already do that... unless you mean in a string format? — Andrew Mairose
– Andrew Mairose, Commented Nov 5, 2015 at 16:07
I mean on my webpage, in a string format. so i can have the diffrent values in the array in some sort of list. — Casper
– Casper, Commented Nov 5, 2015 at 16:29

Marie · Accepted Answer · 2015-11-05 19:41:06Z

1

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: '[email protected]'}
  ];

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

edited Nov 5, 2015 at 19:41

answered Nov 5, 2015 at 16:28

Marie

2,2371 gold badge18 silver badges32 bronze badges

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

5 Comments

Casper Over a year ago

Thank you the track by $index is working, but it only shows what i have in the $scope.contactinfo, but not what I'm saving locally. When i'm adding the ['contactFactory'] to my module(var app = angular.module('phonebookApp', ['ionic'] )), the app is not working at all? I haven't really learned about factorys i will go read up on it. Thank you for the help.

Marie Over a year ago

@Casper I didn't test that factory code so it might not be perfect. In your load function, $scope.loadData , you are loading to a variable that isnt used anywhere else. You need to put it on the scope somewhere. The easiest way would be to replace your console.log with $scope.contactinfo = contactdetail

Casper Over a year ago

I've replaced the console.log with the scope, but how would i go about in the view, so it list all the objects there are?

Marie Over a year ago

After you assign the loaded data to the scope variable with $scope.contactinfo = contactdetail the same ng-repeat snippet I posted above will work. It should update automatically on load, too.

Casper Over a year ago

Hmm it dosen't unfortunately it only shows the one i put into the array myself in the code.

mat3e · Accepted Answer · 2015-11-05 16:11:46Z

0

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 e.g. 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.

answered Nov 5, 2015 at 16:11

mat3e

7915 silver badges18 bronze badges

Collectives™ on Stack Overflow

Getting value from JSON object with Angular

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related