How do I display json data in HTML page from json string stored in localstorage

Question

I have data returned from laravel in the following format. I store this in localstorage to be used by the users once he logs in.

I am using angular in frontend, this is how I store it

$http.get($scope.url).success(function(redata){
    localStorage.setItem('session', JSON.stringify(redata));
    $scope.fulldata = JSON.parse(localStorage.getItem("session"));
});

This is the json data

{
"tweets":[
    {"id":"3","uid":"15","tweets":"Molly's first tweet"},
    {"id":"4","uid":"15","tweets":"molly again here, second tweet"},
    {"id":"5","uid":"15","tweets":"third tweet"}
   ],

"users":[
    {"id":"1","name":"rob","email":"rob@gmail.com","password":""},
    {"id":"2","name":"bob","email":"bob@gmail.com","password":""}
    ]
}

I am able to display the json using angular ng-repeat

<p ng-repeat="data in fulldata">
    {{ data }}
</p>

But if I need to just display the content of tweets ie "tweets" field of tweets, how do I do that.

I tried :-

<p ng-repeat="data in fulldata">
    {{ data.tweets.tweets }}
</p>

but this did not work.

Thanks

Answer 1

You are looping through fulldata, which has just single tweets element. you need to loop through fulldata.tweets

<p ng-repeat="data in fulldata.tweets">
    {{ data.tweets}}
</p>

or if you need to loop through all fulldata for all tweets

<div ng-repeat="data in fulldata">
   <p ng-repeat="tweet in data.tweets">
       {{ tweet.tweets }}
   </p>
</div>

Answer 2

you have to loop on tweets array.

<p ng-repeat="data in fulldata.tweets">
    {{ data.tweets }}
</p>

Answer 3

since the inner JSON is nested so you need two nested ng-repeat

<div ng-repeat="data in fulldata">
 <p ng-repeat="tweets in data.tweets">
    {{ tweets.tweets }}
 </p>
</div>

Answer 4

<p ng-repeat="tweet in fulldata.tweets">
    {{ tweet.tweets }}
</p>

This is what you want to do, no need for nested ng-repeats unless you specifically want that.