Retrieving a basic array of strings from the server using Ember.js

Question

Retrieving a basic array of strings from the server using Ember.js

Can a simple JSON array be retrieved from the server and used as a constant lookup table in an Ember application?

I have a Rails controller that sends back a basic array of strings:

[ "item one", "item two", "item three", ...]

. I do not want these to be full Ember Models, nor do I want them represented as key:value pairs (so not like this:

[{name: "item one"}, {name: "item two"}, {name: "item three"}, ...]

)

How can I fetch the JSON array once and then reference it in my application?

For starters, I attempted to define a property on a controller that is then displayed in Handlebars using {{each}} tags:

controller:

window.App.SimpleController = Ember.Controller.extend(
  words: (() ->
    Ember.$.getJSON("http://localhost:3000/dictionary")
  ).property()
)

template:

{{#each words}}
    {{this}}
{{/each}}

Ember is showing an error that it's not an Array, but a jQuery promise object:

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed {readyState: 1, getResponseHeader: ...

This is also confusing - I thought Ember could handle promises as arrays?

javascript arrays ember.js

Answer 1

Answer №1

Ember is designed to handle promises returned to a model hook, rather than a computed property. It is recommended to set this up in a route or utilize a promise proxy for the computed property.

Typically, data fetching and setting is done in the route. However, if you prefer to use a computed property in the controller, you can employ the proxy pattern provided by Ember Data, which utilizes classes from Ember.

For an object response from the server, your computed property can be structured like this:

words: (() ->
  var foo = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin),
      promise = Ember.$.getJSON("http://localhost:3000/dictionary");
  foo.create({ promise: promise });
).property()

If the response is an array, you would set up an array proxy in a similar manner.

words: (() ->
  var foo = Ember.ArrayProxy.extend(Ember.PromiseProxyMixin),
      promise = Ember.$.getJSON("http://localhost:3000/dictionary");
  foo.create({ promise: promise });
).property()

If dealing with an array, there is another approach of returning an array reference and populating it later.

words: (() ->
  var foo = [],
      promise = Ember.$.getJSON("http://localhost:3000/dictionary");

  foo.then(function(data){ // this occurs asynchronously
    data.forEach(function(item){
      foo.pushObject(item);
    });
  });

  return foo;
).property()

Alternatively, you can simply set the property during the route setup: EmberJS: How to load multiple models on the same route?

Answer 2

Ember is designed to handle promises returned to a model hook, rather than a computed property. It is recommended to set this up in a route or utilize a promise proxy for the computed property.

Typically, data fetching and setting is done in the route. However, if you prefer to use a computed property in the controller, you can employ the proxy pattern provided by Ember Data, which utilizes classes from Ember.

For an object response from the server, your computed property can be structured like this:

words: (() ->
  var foo = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin),
      promise = Ember.$.getJSON("http://localhost:3000/dictionary");
  foo.create({ promise: promise });
).property()

If the response is an array, you would set up an array proxy in a similar manner.

words: (() ->
  var foo = Ember.ArrayProxy.extend(Ember.PromiseProxyMixin),
      promise = Ember.$.getJSON("http://localhost:3000/dictionary");
  foo.create({ promise: promise });
).property()

If dealing with an array, there is another approach of returning an array reference and populating it later.

words: (() ->
  var foo = [],
      promise = Ember.$.getJSON("http://localhost:3000/dictionary");

  foo.then(function(data){ // this occurs asynchronously
    data.forEach(function(item){
      foo.pushObject(item);
    });
  });

  return foo;
).property()

Alternatively, you can simply set the property during the route setup: EmberJS: How to load multiple models on the same route?

Answer 3

Answer №2

It's true that Ember treats promises as arrays, but remember to actually return that array. I'm not familiar with rail syntax, but in regular syntax it would look something like this:

return Ember.$.getJSON("http://localhost:3000/dictionary").then(function(data){
     return data;
});

Also, make sure this code is in the route, not the controller.

I hope this explanation is helpful!

Answer 4

It's true that Ember treats promises as arrays, but remember to actually return that array. I'm not familiar with rail syntax, but in regular syntax it would look something like this:

return Ember.$.getJSON("http://localhost:3000/dictionary").then(function(data){
     return data;
});

Also, make sure this code is in the route, not the controller.

I hope this explanation is helpful!

Retrieving a basic array of strings from the server using Ember.js

Answer №1

Answer №2

Similar questions

Creating a front-end angular application with npm and grunt commands

Is there a possibility of encountering an endless update loop within a component's render function?

The useEffect hook is not successfully fetching data from the local db.json file

What is the best way to halt a jQuery function when hovering over it?

What is the process for integrating custom event information stored in the {} property of a highchart dataset into highcharts-vue?

Displaying JSON data obtained from two separate arrays in AngularJS - is it possible?

Updating a database on ASP.NET without the need to refresh the page

Guide on how to retrieve information from an API and populate it into a dropdown menu

Navigating pointers and handling segmentation faults in the C programming language

Is there a way to change the border property of an element when clicked, without causing the displacement of other elements?

Looking to convert this single object into an array of objects within VueJS

What is the best way to control the amount of rows displayed in my gallery at any given time?

Establishing a Table of Disarray

The functionality for selecting text in multiple dropdown menus using the .on method is currently limited to the first dropdown

Refine JSON data by selecting only distinct key/value pairs

Splitting a foreach loop isn't functioning correctly

How can you transform a nested array into a flat JavaScript map?

Using JavaScript to parse an XML document on a WAMP server

attempting to retrieve numerical variable beyond the function in jQuery

Arrange search results using $in array parameter in MongoDB