Showing JSON response on an HTML page using AngularJS

Question

Showing JSON response on an HTML page using AngularJS

I have limited experience with JavaScript and/or Angular, but I am required to utilize it for a research project. My task involves showcasing the JSON data returned by another component on a webpage.

Here is how the process unfolds:

When a user clicks on the Submit button on the user interface, a JSON file is sent to another component which processes it and generates a response in JSON format. This response JSON needs to be displayed on a webpage.

The Submit button appears on a page named page2.html:

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

The generateJSON() method includes the following code:

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

The routing setup looks like this:

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

What steps should I take to ensure that the JSON data is correctly displayed on outputOffers.html?

javascript angularjs angular-ui-router

Answer 1

Answer №1

If you want to display the response json data on a separate page after generating it in your $scope.generateJSON method, I recommend redirecting to the outputOffers results page and passing the json data as a parameter.

In the resultsController, you can then assign this passed json data to a variable like $scope.greeting, which can be used in your outputOffers view.

To pass parameters between views, make use of the routeParams service and inject it into your resultsController.

Add the $location service in your page2Controller for redirection purposes by injecting it alongside $scope:

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

Your generateJSON method within the page2 controller should include actions like generating components ID, adding restrictions, converting data to JSON format, and making an HTTP post request with appropriate headers. Upon successful data retrieval, redirect to the results page while passing the json data as a parameter using $location.

resultsController

Don't forget to inject the $routeParams in your resultsController to capture any parameters sent via the URL:

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

In the resultsController, check if the jsonData parameter exists (sent from page2) before assigning it to $scope.greeting. This allows proper handling based on whether the parameter is present or not.

(function() {
  if($routeParams.jsonData == null || $routeParams.jsonData === ""){
    $location.path('topage2'); // Redirect to page2 if jsonData is missing
  } else {
    $scope.greeting = $routeParams.jsonData; // Assign jsonData to scope
    console.log($scope.greeting); // Log the data for verification
  }
})();

Utilize the $scope.greeting variable in your outputOffers.html view to display specific properties from the json object:

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

Update:

Based on the snippet of your json provided, iterate through the json data in the outputOffers.html view using ng-repeat:

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

Answer 2

If you want to display the response json data on a separate page after generating it in your $scope.generateJSON method, I recommend redirecting to the outputOffers results page and passing the json data as a parameter.

In the resultsController, you can then assign this passed json data to a variable like $scope.greeting, which can be used in your outputOffers view.

To pass parameters between views, make use of the routeParams service and inject it into your resultsController.

Add the $location service in your page2Controller for redirection purposes by injecting it alongside $scope:

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

Your generateJSON method within the page2 controller should include actions like generating components ID, adding restrictions, converting data to JSON format, and making an HTTP post request with appropriate headers. Upon successful data retrieval, redirect to the results page while passing the json data as a parameter using $location.

resultsController

Don't forget to inject the $routeParams in your resultsController to capture any parameters sent via the URL:

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

In the resultsController, check if the jsonData parameter exists (sent from page2) before assigning it to $scope.greeting. This allows proper handling based on whether the parameter is present or not.

(function() {
  if($routeParams.jsonData == null || $routeParams.jsonData === ""){
    $location.path('topage2'); // Redirect to page2 if jsonData is missing
  } else {
    $scope.greeting = $routeParams.jsonData; // Assign jsonData to scope
    console.log($scope.greeting); // Log the data for verification
  }
})();

Utilize the $scope.greeting variable in your outputOffers.html view to display specific properties from the json object:

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

Update:

Based on the snippet of your json provided, iterate through the json data in the outputOffers.html view using ng-repeat:

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

Answer 3

Answer №2

To enhance the functionality, consider creating a service with two distinct functions - one for storing and another for fetching values. The function responsible for storing the value can be integrated into the 'page2Controller', while the function for fetching the value should be placed in the resultsController.

Check out this brief tutorial to guide you through:

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

For instance, here's how the page2Controller should be structured:

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

The resultsController implementation would resemble the following:

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

Lastly, remember to include this snippet in your 'outputOffers.html' file:

{{greeting}}

Answer 4

To enhance the functionality, consider creating a service with two distinct functions - one for storing and another for fetching values. The function responsible for storing the value can be integrated into the 'page2Controller', while the function for fetching the value should be placed in the resultsController.

Check out this brief tutorial to guide you through:

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

For instance, here's how the page2Controller should be structured:

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

The resultsController implementation would resemble the following:

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

Lastly, remember to include this snippet in your 'outputOffers.html' file:

{{greeting}}

Showing JSON response on an HTML page using AngularJS

Answer №1

resultsController

Update:

Answer №2

Similar questions

Sending arguments from JavaScript to PHP via ajax

What is the method for fetching the unprocessed value of a directive attribute in Angular?

Node.js express version 4.13.3 is experiencing an issue where the serveStatic method is not properly serving mp3 or

Adjust the size of the external JavaScript code

I am facing an issue where my AngularJS code is not executing properly on JSF

Update data in PHP dynamically without reloading the page

Modifying the content within a DIV element

Tips for designing a multi-level dropdown navbar

Encountering an unexpected error: receiving a void element tag as input in React

"Integration error: specified token_name parameters are invalid." FORTPAY INTEGRATION

Unable to extract property from object in context due to its undefined status

Reordering sections in a dynamic manner

Is there a way to turn off alerts from Aspx files for HTML and CSS?

JavaScript is proving to be uncooperative in allowing me to modify the

Guide on activating an event when a slider image is updated using jquery

The Datepicker and Tablesorter dilemma

Mastering asynchronous function handling in Node.js

Tips for incorporating an onClick event into a variable beyond the class extension

Strategies for Applying Filters in Search Feature on IOS Devices

What is the process for setting a cookie that allows for reading from the same domain with a different port?