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

Tips for dealing with event bubbling in React

Stop unauthorized users from accessing the static content of an ASP.NET - MVC application

JavaScript tutorial: Removing spaces in column names and creating case-insensitive queries

Looking for a JavaScript code to create a text link that says "submit"?

"Upon loading the page, I encounter JavaScript errors related to Angular's ngOnInit function. However, despite these errors,

What could be causing the fluctuation in ui-grid height as I scroll horizontally?

Implementing AJAX to dynamically insert content into div elements on the page

Does the Array Splice method always remove an item from the end?

Is there a way to get Axios to display CSS on the page?

Pattern matching for a string with numerous repetitions using Regular Expressions

What steps should I follow to create an automatic image slider using Fancybox that transitions to the next slide seamlessly?

What is the process of compiling TypeScript code?

Ensure all fields are valid prior to performing an update

Issues arise when props do not get transferred successfully from the getStaticPaths() to the getStaticProps

initial render results in undefined data

`Optimizing Performance using jQuery Functions and AJAX`

bridging information from tables with text fields in forms

What sets canvas and webgl renderer apart in the world of three.js?

Using template expressions to access properties that contain spaces

Incorporating CASL with the latest version of Angular, version