在 html 页面中显示 JSON 答案 AngularJS

Question

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

流程如下：

从用户界面单击“提交”按钮，一个 JSON 文件被发送到另一个组件，该组件执行某些操作并且 returns 一个 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

一个选项可以是创建一个服务，该服务将包含两个函数来存储和获取值。存储值的函数将放在'page2Controller'中。获取值的函数将放在 resultsController 中。在下面找到一个简短的教程。

服务应如下所示：

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"
   });
});

app.service('greetingService', function() {
    this.greeting = '';
    this.store = function (greeting) {
        this.greeting = greeting;
    }
    this.fetch = function () {
      return this.greeting;
    }
});

page2Controller 应如下所示：

app.controller('page2Controller', function($scope, greetingService) {
  $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);
        greetingService.store(response.data);
    });
}});
});

resultsController 应如下所示：

app.controller('resultsController ', function($scope, greetingService) {
  $scope.greeting = greetingService.fetch();
});

然后，在您 'outputOffers.html' 的某处放置：

{{greeting}}

Answer 2

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

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

您需要 routeParams 服务来在视图之间传递参数，并且您需要将其注入到您的 resultsController 中。

您还需要在 page2Controller 中使用 $location 服务（以便执行重定向），因此按如下方式注入它：

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

page2 控制器中的 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 });
    });
}});

结果控制器

首先将 $routeParams 注入到您的 resultsController 中，这样我们就可以获取与 url 一起发送的任何参数（将 myApp 替换为您的应用名称）：

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

在 resultsController 中使用匿名函数来检查 jsonData 参数是否存在（我们从 page2 控制器发送的）。如果它确实存在，那么我们将它分配给一个 $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 视图中您可以使用 $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>

在 html 页面中显示 JSON 答案 AngularJS

Displaying JSON answer in an html page with AngularJS

javascript

angularjs

angular-ui-router

结果控制器

更新：