javascript - 使用 AngularJS 在 html 页面中显示 JSON 答案

Question

我没有 JavaScript 和/或 Angular 的背景，但我需要将其用于研究项目。不久，我需要在网页上显示 JSON，这是来自另一个组件的答案。

流程如下:

从用户界面点击提交按钮，一个 JSON 文件被发送到另一个组件，该组件执行某些操作并返回一个 JSON。此答案 JSON 应显示在网页上。

提交按钮如下，发生在名为 page2.html 的页面中:

<button name="topage1" class="button-submit" ng-click="generateJSON()">Submit</font></button>

generateJSON() 方法的代码如下:

$scope.generateJSON = function(){
   generateIdForComponents();
   addRestrictions();
   // REST
   data = angular.toJson($scope.schema, true);
   headers= {
     'Content-Type': 'application/json',
     'Cache-Control':'no-cache',
     'Access-Control-Allow-Origin': '*'
   };

$http.post('http://127.0.0.1:5000/re/z3', data, {headers:headers}).
    then(function(response) {
        console.log("Merge post ", response.data);
        $scope.greeting = response.data;
    });
}});

路由如下:

app.config(function($routeProvider) {
  $routeProvider
  .when("/topage1", {
      templateUrl : "page1.html",
      controller : "page1Controller"
  })
  .when("/topage2", {
      templateUrl : "page2.html",
      controller : "page2Controller"
  })
  .when("/results", {
      templateUrl : "outputOffers.html",
      controller : "resultsController"
  })
  .otherwise({
      templateUrl : "page1.html",
      controller : "page1Controller"
   });
});

我应该编写什么代码才能使 JSON 显示在 outputOffers.html 上。

Answer 1

我建议在您的 $scope.generateJSON 方法的回调中，您重定向到 outputOffers 结果页面(您要在其中显示响应 json 数据)并将 json 数据作为参数。

然后在您的 resultsController 中，您可以将 json 数据(作为参数发送)分配给 $scope.greeting 变量以在您的 outputOffers View 中使用。

您需要 routeParams服务在 View 之间传递参数，您需要将其注入(inject)到您的 resultsController 中。

您还需要在您的 page2Controller 中使用 $location 服务(以便执行重定向)，因此按如下方式注入(inject)它:

myApp.controller("page2Controller", function($scope, $location){... 

page2 Controller 中的 generateJSON 方法如下所示:

$scope.generateJSON = function(){
   generateIdForComponents();
   addRestrictions();
   // REST
   data = angular.toJson($scope.schema, true);
   headers= {
     'Content-Type': 'application/json',
     'Cache-Control':'no-cache',
     'Access-Control-Allow-Origin': '*'
   };

   $http.post('http://127.0.0.1:5000/re/z3', data, {headers:headers}).
    then(function(response) {
        console.log("Merge post ", response.data);
        //redirect to the outputOffers view, passing the json data as a parameter
        $location.path('results').search({jsonData: response.data });
    });
}});

结果 Controller

首先将 $routeParams 注入(inject)到您的 resultsController 中，这样我们就可以获取通过 url 发送的任何参数(将 myApp 替换为您的应用名称):

myApp.controller("resultsController", function($scope, $routeParams){...

在 resultsController 中使用一个匿名函数来检查 jsonData 参数是否存在(我们从 page2 Controller 发送的)。如果它确实存在，那么我们将它分配给一个 $scope.greeting 变量

(function() {
  if($routeParams.jsonData == null || $routeParams.jsonData === ""){
    //If the jsonData is not set or if it doesnt contain a value (i.e is the empty string) then redirect to the page2 view.
    $location.path('topage2'); 
  }else{ 
    //the jsonData parameter does exist so assign it to our scope.greeting variable so we can use it in our view.
    $scope.greeting = $routeParams.jsonData;
    //log the data to make sure it was passed as parameter:
    console.log($scope.greeting);
  }
})();

然后在 outputOffers.html View 中，您可以使用 $scope.greeting 变量。例如，如果 json 包含“title”和“message”属性，那么我们可以执行以下操作:

<p>{{greeting.title}}</p>
<p>{{greeting.message}}</p>

更新:

在您的评论中看到您的 json 片段后，您可以执行以下操作来显示它:

<div ng-repeat="g in greeting"> 
  <p>id: {{g.id}}</p>
  <p>clockspeed: {{g.offer.clockSpeed}} </p>
</div>