JavaScript $http.get an json array and store it in localstorage

Question

I'm trying to receive an json Array and store it in the local storage. I've seen some questions like this but they couldn't help me. So i wanted to try with my own question. Im developing in Ionic Framework.

My controller includes following:

app.controller('QuestionsCtrl', function($scope, $http, $stateParams, $localstorage) {

$scope.getData = function() {

// get the json
   $http.get("data/fragenArray.json")
        .success(function(data) {

        //output of json as a string  -> correct
        console.log('data: ' + JSON.stringify(data));

        // store json in local storage
        $localstorage.setObject('fragenset', data);

        // restore json from local storage
        var post = $localstorage.getObject('fragenset');

        // output of local storage item -> incorrect
        // I got: Test xxx: [object Object]
        console.log('Test xxx: ' + post);
     })
     .error(function(data) {
            alert("ERROR");
        });
    }
 });

To store the json I've got:

angular.module('utils', [])

 .factory('$localstorage', ['$window', function($window) {
   return {
     set: function(key, value) {
       $window.localStorage[key] = value;
     },
     get: function(key, defaultValue) {
       return $window.localStorage[key] || defaultValue;
     },
     setObject: function(key, value) {
       $window.localStorage[key] = JSON.stringify(value);
     },
     getObject: function(key) {
       return JSON.parse($window.localStorage[key] || '{}');
     }
   }
 }]);

So I decided to try it without the http.get request:

app.run(function($localstorage, $http) {
   $localstorage.setObject('post', {"fragen":[
    {
        "id":"1",
        "frage":"Wie ist das Wetter?",
        "antworten": {
            "a_1":"gut",
            "a_2":"schlecht"
        }
    },
    {
        "id":"2",
        "frage":"Wie geht es dir?",
        "antworten": {
            "a_1":"gut",
            "a_2":"schlecht"
        }
    }
 ]});
   var post = $localstorage.getObject('post');
   console.log(post);
 })

And the result ist exactly what i expected - an json object.

So how can i store the json array from the http.get correctly?

Paul · Accepted Answer · 2015-01-29 16:03:31Z

0

We know your data retrieval is working correctly because it passes the test written with JSON.stringify():

// get the json
   $http.get("data/fragenArray.json")
        .success(function(data) {

        //output of json as a string  -> correct
        console.log('data: ' + JSON.stringify(data));

        // store json in local storage
        $localstorage.setObject('fragenset', data);

        // restore json from local storage
        var post = $localstorage.getObject('fragenset');

        // output of local storage item -> incorrect
        // I got: Test xxx: [object Object]
        console.log('Test xxx: ' + post);
     })

The last test is a bad test. It is not the result that is incorrect. The coding of the test is incorrect.

This is because you can not inspect an object by appending it to a string.

If X is an object, then no matter what X contains, perhaps X = {'a': 123}

console.log("anything "+X); 
// --> "anything [object Object]"

This is because "anything "+X is a string expression and when an object is coerced to string, Javascript replaces the object with the string "[object Object]"

Here is what you should test instead:

 //output of storage as a json string  
 console.log('post: ' + JSON.stringify(post));

and finally

 // json string of storage matches json string of input data
 console.log(JSON.stringify(data)===JSON.stringify(post));
 // will yield true or false

edited Jan 29, 2015 at 16:03

answered Jan 29, 2015 at 15:58

Paul

27.8k13 gold badges90 silver badges127 bronze badges

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

2 Comments

David Over a year ago

Ok, well that works fine. Thank you. BUT then i get the result as a string. If i would like to do something like: $scope.questions= post.frage[i].id It doesn't work because it isn't an object. My aim ist to make one get request. Store it local and later i will fill in some views, labels etc. Sorry but i'm really new to JS. ;-)

Paul Over a year ago

In the code above, post is an object. Why do you think it is a string? Because a string was printed out?

Collectives™ on Stack Overflow

JavaScript $http.get an json array and store it in localstorage

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related