What is the best way to extract information from a JSON XHR request and incorporate it into my template?

Question

What is the best way to extract information from a JSON XHR request and incorporate it into my template?

I am brand new to using Ember. Right now, my main goal is to connect to an API that provides random text and then show that text on a webpage. The specific API endpoint I am using is "" which will give back a response in JSON format.

app/controllers/randomtext.js

import Ember from 'ember';

export default Ember.Controller.extend({
  ajax: Ember.inject.service(),
  actions: {
    sendRequest() {
      return this.get('ajax').request('http://www.randomtext.me/api/lorem/ul-5/5-15');
    }
  }
});

The XHR request is successful, and the correct JSON object is being returned as I can verify in the Chrome developer tab.

This is my app/templates/randomtext.hbs

<h1>Random Text</h1>

 <p>test</p><button {{action "sendRequest"}}>testing</button>

Clicking the button triggers the xhr request successfully. However, I am unsure how to access the text_out property of the JSON response or display any part of it. Can someone provide a simple tutorial on how to make a GET request to an external API endpoint and showcase the response on a webpage within my ember application?

javascript json ember.js xmlhttprequest

Answer 1

Answer №1

In your action handler, you are returning without rendering anything on the screen. To display content, you must establish a binding between your template and JavaScript file. Check out this example twiddle. I've added {{randomText}} in application.hbs, which connects to the randomText attribute in the application.js controller. Initially, it's undefined, so no text is shown. When you click the button, the action handler in application.js is triggered. Inside the handler, the data from a remote call is assigned to the randomText attribute using Ember.String.htmlSafe (which converts the string into HTML format). You can directly link attributes defined in the controller with the corresponding template. If you're using a route instead of a controller, you need to utilize the model hook. I recommend exploring the official Ember Guide and completing the tutorials provided there.

Answer 2

In your action handler, you are returning without rendering anything on the screen. To display content, you must establish a binding between your template and JavaScript file. Check out this example twiddle. I've added {{randomText}} in application.hbs, which connects to the randomText attribute in the application.js controller. Initially, it's undefined, so no text is shown. When you click the button, the action handler in application.js is triggered. Inside the handler, the data from a remote call is assigned to the randomText attribute using Ember.String.htmlSafe (which converts the string into HTML format). You can directly link attributes defined in the controller with the corresponding template. If you're using a route instead of a controller, you need to utilize the model hook. I recommend exploring the official Ember Guide and completing the tutorials provided there.

Answer 3

Answer №2

To send a request, navigate to the app/routes/randomtext.js file and access the model hook.

model: function() {
 Em.RSVP.Promise.cast(Em.$.getJSON('http://www.randomtext.me/api/lorem/ul-5/5-15')).then((function(_this) {
      return function(data) {
    return Em.Object.create(data);
  };
})(this));
}

setupController: function(controller, model) {
  this._super(controller, model);
 return controller.set('textData', model);
}

In the app/templates/randomtext.hbs file,

You can utilize the

{{#each textData as someText}} <li>This is first item in array {{someText.item}}</li> {{/each}}

helper for looping through an array. If the response is a simple object and you only need to display a specific property, use {{textData.title}}.

Answer 4

To send a request, navigate to the app/routes/randomtext.js file and access the model hook.

model: function() {
 Em.RSVP.Promise.cast(Em.$.getJSON('http://www.randomtext.me/api/lorem/ul-5/5-15')).then((function(_this) {
      return function(data) {
    return Em.Object.create(data);
  };
})(this));
}

setupController: function(controller, model) {
  this._super(controller, model);
 return controller.set('textData', model);
}

In the app/templates/randomtext.hbs file,

You can utilize the

{{#each textData as someText}} <li>This is first item in array {{someText.item}}</li> {{/each}}

helper for looping through an array. If the response is a simple object and you only need to display a specific property, use {{textData.title}}.

What is the best way to extract information from a JSON XHR request and incorporate it into my template?

Answer №1

Answer №2

Similar questions

Update the observability status of one observable using a different observable

tips for transmitting JSON data via the PHP API

Utilize PHP to filter JSON data and dynamically populate a dropdown menu with the results

Is anyone else experiencing issues with the Express middleware that checks for IDs? Looking for suggestions on how to fix

Utilizing AJAX in Wordpress to Dynamically Update HREF Links

Issue: .catch(error) function in Node / Express not returning as expectedDescription: After

Creating interactive navigation bar effects with scroll and click functionality using jQuery

The information retrieved from the API is not appearing as expected within the Angular 9 ABP framework

What could be causing the AngularUI bootstrap datepicker to not appear?

What is the best way to extract data from a basic JSON response using a fetch request

What is the best method for initializing the value of ng-model as an empty string in AngularJS?

What could be causing the service method in the controller not to be called by Node JS?

Effortlessly query a MySQL database using Whoosh to generate real-time JSON search results

UV mapping with Plane BufferGeometry in Three.js

Having trouble with jQuery animate function?

Is it possible to utilize PubNub for updating and removing messages without requiring the "Storage & Playback" feature?

Encountering an issue of duplicate key error when using multiple v-for loops with various keys

Learn the process of synchronously loading forms and data in Angular

How can recursive addition of identical key value pairs be accomplished in JSON by using C#?

What is the process for upgrading TypeScript to the latest version?