"Discover the method to access values within an associative array or object in an Ember template by utilizing a

When working with Ember, the traditional syntax for looking up array values by key is to use the .[] syntax. For example:

{{myArray.[0]}}

However, I have encountered an issue when trying to perform a lookup on an associative array. Even though I have a separate model/controller property listing the keys, I am always getting undefined as the value.

Here is a simple controller as an example:

App.IndexRoute = Ember.Route.extend({
    model: function () {
        var ret = [];
        ret['notGreat'] = ['Plain Yogurt', 'Clams'];
        ret['great'] = ['Pizza', 'Chicken'];
        return Ember.RSVP.hash({
            keys: ['great', 'notGreat'],
            array: ret
        });

    }
});

In my template, I am using:

    {{#each key in model.keys}}
      <li>{{key}}</li>
      {{#each subItem in model.array.[key]}}
          <li>Subitem: {{subItem}}</li>

Unfortunately, model.array.[key] always returns undefined. Is there a specific method for performing associative array lookups in Ember? I am open to creating a controller function like getFoodsWithKey(key), but so far, I haven't found any resources indicating that calling a controller function (as opposed to a computed property) with parameters is possible.

Explore JSFiddle (array notation): http://jsfiddle.net/6Evrq/786/

Visit JSFiddle (object property notation): http://jsfiddle.net/6Evrq/787/

Answer №1

For those working with Ember 2.0 or newer, there is a helpful each-in helper that was introduced in an announcement found here.

To implement this in your template:

<ul>
{{#each-in model.array as |key value|}}
  <li>{{key}}: {{value}}</li>
{{/each-in}}
</ul>

In addition, the get helper can be used to retrieve specific values by their keys:

{{get items 'Item 1'}}
{{get items somePathWithAKey}}

For a visual demonstration, check out this JSBin demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

Possibly include an example or a step-by-step guide to provide additional value and make the content more

Enhance the main array by adding the second and third arrays as properties http://jsfiddle.net/eRj9V/ var main = [{ 'id': 1, //'second':[ // {'something':'here'}, //{'something':' ...

I am looking to have my page refresh just one time

I have created an admin page where I can delete users, but each time I delete a user, the page requires a refresh. I attempted to use header refresh, but this action caused my page to refresh multiple times. Is there a way to ensure that my page only refr ...

Automatically Refreshing on Vue.js: Embracing the Passage of Time

I want to display this clock on Vue. The clock should automatically update the time, but how can I make this code work in Vue? Is there a simple way to implement this in Vue without using (document.getElementBy...) function updateTime () { document.ge ...

AJAX and Python conflict - The requested resource is missing the 'Access-Control-Allow-Origin' header

I am currently developing a unique JavaScript library that has the capability to communicate with a basic Python web server using AJAX. Below is the snippet for the web server class: class WebHandler(http.server.BaseHTTPRequestHandler): def parse_PO ...

"Implementing an ellipsis feature in Highcharts to handle lengthy data gracefully

Looking for some help with adjusting the positioning of a pie chart on the page. The data on the left and right sides is not displaying correctly, so I want to center the chart and add ellipsis for any overflow. Check out the code here: http://jsfiddle.n ...

Is it possible to implement a rolling time picker using jQuery UI Datepicker?

Currently, I am working on a project that heavily utilizes jQuery's UI Datepicker. However, there is one field that also requires the selection of a time, and the client has requested an iPhone-like timepicker in addition to the original date picker. ...

Ensure that the content remains at the center of the screen, but is dynamic and changes

I have a unique concept I want to experiment with, but I'm unsure of the best approach to take. My idea involves centering content on the screen and instead of having it scroll off and new content scroll in, I would like it to stay centered and smoot ...

What are the specific actions performed on the server and on the client in ReactJS when rendering a component?

I've recently delved into the world of ReactJS, following tutorials and reading the documentation, but I'm still struggling to grasp a fundamental concept about how React actually operates. When a page is served, what exactly occurs behind the s ...

Creating a compact Swiper slider: reducing image size without sacrificing full window coverage!

Utilizing Swiper to craft a slider that occupies the entire window, with a slight margin for a bar-- no issues there. (https://i.sstatic.net/qcGBA.jpg) However, the image I placed in for the slide () appears to be excessively enlarged. Is there a way to ...

What is the process for configuring SSL in node.js and express.js?

I'm currently working on setting up my application to run in HTTPS mode. Despite thinking that my configuration is correct, the page isn't loading at all. Within my SSL folder, I have the following files: credentials.js my-ca.pem my-cert.pem my ...

What is the best way to create pages that showcase 10 posts each?

Currently, I am facing a challenge with displaying 100 posts using the Fetch API on one single page. I am looking for a way to create separate pages where each page would showcase only 10 posts. Below is my existing JavaScript code: fetch('htt ...

Leveraging a global array in a PHP multi-page form

My goal is to develop a php multipage form, but I'm facing challenges with using $_SESSION variables to store and retrieve data when moving between pages. I've considered using a custom global array (e.g. GLOBAL $data; $data = array();) to store ...

Encountering an unknown value within the inner array of a JSON response when using Angular

I received the following JSON data from an API: [ { "CinemaId": "Hfsdfsdfs", "FilmCode": "HIWdfsdfsfsf47", "FilmTitle": "BAfsdfAAR", "CinemaName": "CsfsnfsfsAhmedabad", "CinemaCity": "Ahmedabad", "CinemaLicenseName": "BIGdfsfsAh ...

setting up a C array with duplicated information

I want to set up an array of structs with the same elements repeated, like this: struct st ar[] = { {1,2}, {1,2}, {1,2} }; However, I prefer not to run any code for that. I want the memory layout when the program runs to be as shown without involving CPU ...

Service update causing $scope in Ionic Angular Cordova to remain stagnant

As a newcomer to Angular, I've been working on a project to create an app that can answer questions, select images, and send data to the server. I'm facing some challenges with updating the scope properly when a user selects an image. It seems l ...

Module cannot be resolved within react-viro

Having some issues running this application and receiving an error message. View the app code on GitHub here: https://github.com/vnovick/pile-blocks-ar I have followed the asset import instructions outlined here: . Despite following the steps correctly, I ...

javascript onload button is selected

I am looking to create a button on page load for my login page in Chrome. I want the login button to be preselected when the page loads, and when I press Enter, the onclick function of the button should be triggered. Any advice on how to achieve this? Th ...

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

Creating a React.js component and setting an initial value within it

Recently delved into the world of React.js and currently attempting to create a reusable header that can switch between two states: one for when the user is logged in, and another for when the user is not logged in. // Header.js var Header = React.createC ...