Отображение JSON-ответа на html-странице с AngularJS

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.

Вам необходим сервис routeParams для передачи параметров между представлениями, и вам нужно будет вставить его в свой ResultsController.

Вам также понадобится сервис $location в вашемpage2Controller (для выполнения перенаправления), поэтому добавьте его следующим образом:

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

Ваш метод generateJSON в контроллере page2 будет выглядеть следующим образом:

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

resultsController

Сначала добавьте $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>

Answer 2

Одним из вариантов может быть создание службы, которая будет содержать две функции для хранения и извлечения значения.Функция, которая хранит значение, будет помещена в «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}}