在 angularjs 中显示 JSON 文件答案

【问题标题】：to display JSON file in angularjs在 angularjs 中显示 JSON 文件
【发布时间】：2020-06-05 01:14:09
【问题描述】：

我有一个来自后端的 json 文件，我想通过ng-repeat 显示它。我不知道如何获取元素。

在html文件中，我想做这样的事情

<div ng-repeat = "answer in answers">
  {{answer}}
</div>

在我的 app.js 文件中，我知道我在 console.log 上显示的数据是正确的

socket.on('got message', function(data){
  console.log(data);
});

但我不知道如何转换数据来回答。 console.log 上的数据显示如下，如果我展开它，我如何将它们放入{{answer}}

 Global Quote:
    01. symbol: "MSFT"
    02. open: "186.9500"
    03. high: "187.2500"
    04. low: "185.8520"
    05. price: "186.6900"
    06. volume: "5185159"
    07. latest trading day: "2020-02-20"
    08. previous close: "187.2800"
    09. change: "-0.5900"
    10. change percent: "-0.3150%"

我不必使用socket，它是一个本地JSON文件，只有我知道如何将它读入{{answer}}。

{ "Global Quote":{
    "01. symbol":"MSFT",
    "02. open":"186.9500",
    "03. high":"187.2500",
    "04. low":"185.8520",
    "05. price":"186.2950",
    "06. volume":"5758297",
    "07. latest trading day":"2020-02-20",
    "08. previous close":"187.2800",
    "09. change":"-0.9850",
    "10. change percent":"-0.5260%"
    }
}

但我不确定如何将数据从 app.js 传递到 html 文件。在我的app.js 文件中，我有

 socket.on('got message', function(data){
     $scope.answers = new Array;
     $scope.answers = data;
     console.log($scope.answers);
 });

但 $scope.answers 正在传递给 html 文件

【问题讨论】：

标签： node.js json angularjs angularjs-ng-repeat

【解决方案1】：

参考您对先前答案的评论，在模型，视图控制器设计中，您在控制器上编写的 $scope.answer 使其自动可用于相应的视图，更明确地说，一个具有 ng-controller=" YourCtrl"，将所有变量都写在 YourCtrl 的 $scope 中。

在较早的答案中给出了一种显示 json 的好方法。如果你不完全了解json的结构，你也可以使用它。

<pre>{{answer | json}}</pre>

这里的json是一个角度过滤器，用来显示json数据。

【讨论】：

【解决方案2】：

一种方法是：

<div ng-repeat="(key, value) in answers['Global Quote']">
    {{key}} : {{value}}
</div>

有关详细信息，请参阅

AngularJS ng-repeat Directive API Reference - Usage

更新

AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 拆分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。

您也可以使用$apply() 从 JavaScript 进入 AngularJS 执行上下文：

socket.on('got message', function(data){
    $scope.$apply(function() {       
        $scope.answers = data;
        console.log($scope.answers);
    });
});

请记住，在大多数地方（控制器、服务）$apply 已经被处理事件的指令调用。只有在实现自定义事件回调或使用第三方库回调时，才需要显式调用$apply。

有关详细信息，请参阅

AngularJS Developer Guide - Integration with the browser event loop

【讨论】：

感谢@georgeawg，但我不确定如何将数据从 app.js 传递到 html 文件。在我的 app.js 文件中，我有 socket.on('got message', function(data){ $scope.answers = new Array; $scope.answers = data; console.log($scope.answers); }) ;但 $scope.answers 正在传递给 html 文件
谢谢你的解释，很清楚。但由于某些原因，它不起作用。我最终使用了 David Söderberg 的解决方案

【解决方案3】：

<html>
<head>
<title>My website</title>
</head>
<body>
<div ng-repeat="answer in answers">
    <p>{{answer}}</p>
</div>
</body>
</html>

【讨论】：