在 angularjs 中显示 JSON 文件

Question

我有一个来自后端的 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%"

我不必使用套接字，它是一个本地 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 文件

Answer 1

一种方法是：

<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

Answer 2

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

显示 json 的一种好方法在前面的回答中给出。如果您不完全了解 json 的结构，您也可以使用它。

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

此处 json 是一个 angular 过滤器，用于显示 json 数据。

Answer 3

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

在 angularjs 中显示 JSON 文件

to display JSON file in angularjs

node.js

json

angularjs

angularjs-ng-repeat

更新