为什么我的 Json 数据没有使用角度 ng-repeat 显示在表格中？答案

【问题标题】：Why my Json data is not display in table using angular ng-repeat?为什么我的 Json 数据没有使用角度 ng-repeat 显示在表格中？
【发布时间】：2017-07-27 10:49:58
【问题描述】：

我想显示从 PHP 文件返回的 Json 数据，如下所示：

"{\"success\":true,\"message\":\"找到交易历史记录。\",\"user_transactions\":[{\"user_id\":\"4\",\" amount_charged\":\"4.00\",\"amount_transferred\":\"14400.00\",\"app_rate\":\"3600.00\",\"charged_currency\":\"USD\",\"beneficiary_phone\ ":\"256775542757\",\"beneficiary_first_name\":\"Sapkota\",\"beneficiary_last_name\":\"Suresh\",\"beneficiary_country\":\"UG\",\"transferred_currency\": \"UGX\",\"transaction_status\":\"Delivered\",\"order_id\":\"259\",\"created_date\":\"2017-07-25 13:35:48\" ,\"last_modified_date\":\"2017-07-25 13:35:48\"},{\"user_id\":\"4\",\"amount_charged\":\"5.00\",\" amount_transferred\":\"18000.00\",\"app_rate\":\"3600.00\",\"charged_currency\":\"USD\",\"beneficiary_phone\":\"256775542757\",\"beneficiary_first_name\ ":\"Sapkota\",\"beneficiary_last_name\":\"Suresh\",\"beneficiary_country\":\"UG\",\"transferred_currency\":\"UGX\",\"transaction_status\": \"Delivered\",\"order_id\":\"258\",\"created_date\":\"2017-07-25 06:23:05\",\"last_modified_date\":\"2017-07 -2 5 06:23:05\"}]}"

使用 Get 获取的内容如下：

    $http.get("clients.php").then(function (response) {
    $scope.response = response;
    $scope.results = JSON.parse(response.data);

    console.log($scope.results);

}

问题是，在控制台.log 中没有得到任何结果，而在我以这种方式编写的表行中没有任何结果。所以，请任何人帮助我。

<table>
  <tr ng-repeat="result in results.user_transactions">


<td>{{ result.beneficiary_first_name}}</td>
<td>{{ result.transaction_status }}</td>

</tr>

</table>

【问题讨论】：

您的数据是字符串。首先使用 JSON.parse() 解析它
你为什么不安慰响应？先检查一下。
在控制台响应时，我得到： Object {data: ""{\"success\":true,\"message\":\"Transaction histo..."last_modified_date\":\"2016 -11-01 16:55:31\"}]}""，状态：200，配置：对象，状态文本：“确定”，标题：函数}
@SureshSapkota $scope.results = JSON.parse(response.data) 的控制台是什么
我能够解析您的数据。不知道为什么它在那里不起作用。您是否缺少要在此处添加的内容？

标签： html angularjs json

【解决方案1】：

您需要将响应解析为字符串。

$http.get("clients.php").then(function (response) {
        $scope.response = response;
        $scope.results = JSON.parse(response.data);//Parsing string to JSON

        console.log($scope.results);

    }

<table>
  <tr ng-repeat="result in results.user_transaactions">

    <td>{{ res.beneficiary_first_name}}</td>//No need of using index of array
    <td>{{ res.transaction_status }}</td>
    </tr>

</table>

【讨论】：

【解决方案2】：

首先，您必须使用 JSON.parse() 将字符串结果解析为 JSON。

$scope.results = JSON.parse(response.data);

您的 html 中还有另一个问题

<table>
  <tr ng-repeat="result in results.user_transactions">
    <td>{{ result.beneficiary_first_name}}</td>
    <td>{{ result.transaction_status }}</td>
  </tr>
</table>

Working Demo

【讨论】：

嗨，Jain，现在我已经在 JSON.parse() 之后的 consle.log 中获得了数据，但使用您的代码在表格中仍然没有显示任何内容。你能帮我再检查一次吗？
你能相应地更新工作演示吗？让我看看你哪里错了？
你能告诉我console.log($scope.results);的结果吗？
我已附上结果 png 文件以供调试。
让我们continue this discussion in chat.