如何从存储在 localstorage 中的 json 字符串在 HTML 页面中显示 json 数据答案

【问题标题】：How do I display json data in HTML page from json string stored in localstorage如何从存储在 localstorage 中的 json 字符串在 HTML 页面中显示 json 数据
【发布时间】：2016-02-23 11:02:19
【问题描述】：

我从 laravel 返回以下格式的数据。我将其存储在本地存储中，供用户登录后使用。

我在前端使用 angular，这就是我存储它的方式

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

这是json数据

{
"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":""}
    ]
}

我可以使用角度 ng-repeat 显示 json

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

但如果我只需要显示推文的内容，即推文的“推文”字段，我该怎么做。

我试过了：-

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

但这不起作用。

谢谢

【问题讨论】：

标签： javascript angularjs json ng-repeat

【解决方案1】：

你必须在 tweets 数组上循环。

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

【讨论】：

【解决方案2】：

您正在循环遍历只有一个 tweets 元素的 fulldata。你需要遍历 fulldata.tweets

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

或者如果您需要遍历所有推文的所有完整数据

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

【讨论】：

【解决方案3】：

因为内部的JSON 是嵌套的，所以你需要两个嵌套的ng-repeat

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

【讨论】：

【解决方案4】：

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

这就是你想要做的，除非你特别想要，否则不需要嵌套的 ng-repeats。

【讨论】：