Issue with EmberJs: The #each loop is failing to recognize the array that was declared within the component

I'm struggling with this seemingly simple issue, and I could really use some assistance.

In the JavaScript file of the component -

weekShorts: computed(function() {
  return new Array('S', 'M', 'T', 'W', 'T', 'F', 'S');
}),

Then, in the hbs file -

{{#each day in weekShorts}}
  <td>  {{day}}</td>
{{else}}
  <td>
    No items in days
  </td>
{{/each}}

Despite trying the above code, the output consistently shows "No items in days".

Interestingly, when simply printing {{weekShorts}} elsewhere, it displays

S,M,T,W,T,F,S

Why is the #each loop failing to iterate over the array?

UPDATE - It has been suggested that for version 2.x you should follow this format:

{{#each weekShorts as |day|}}
          <td>  {{day}}</td>
        {{else}}
          <td>
            No items in days
          </td>
        {{/each}}

Answer №1

If your ember version is 1.12 or higher, make sure to implement the following code:

{{#each weekShorts as |day|}}

For more information, visit the deprecations blog

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

Discover the process of extracting HTML content that's stored within a JavaScript variable

Having a HTML snippet stored in a variable, like this: var parse= 'Hello<i class="emoji emoji_smile" title=":smile:"></i><i class="emoji emoji_angry" title=":angry:"></i>World' I am looking to extract the value of the "t ...

After following the official guide, I successfully installed Tailwind CSS. However, I am facing issues with utilizing the `bg-black` className for styling the background,

Following the installation guide for Tailwind CSS, I ran the command npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p. Despite this, the background className (bg-black) is not working as expected. Here are the file paths: Directory ...

Getting the value of an HTML list using JavaScript

I am attempting to extract values from an HTML list <li>. <ul> <li><a>Main Menu</a> <ul class="leftbutton" > <li value="List1"><a>Sampe 1</a></li> ...

Tips on reducing Model data using javascript?

In my application, there are two buttons for deleting files. The first button deletes the selected file, and the second button deletes all of the user's files. The second button is only visible when the count of the user's files is 2 or more. Whe ...

Having trouble uploading images on Wordpress?

There have been persistent errors in the admin area for several days now: An unexpected SyntaxError: expected expression, but received '<'. These errors are appearing in files moxie.min.js, plupload.min.js, wp-plupload.min.js As a result, w ...

Connecting JavaScript and jQuery scripts

Help needed! I am a beginner in the world of jQuery and JS. Unfortunately, my JS/jQuery code is not running and I can't figure out why. Can someone please take a look at my HTML and guide me on what might be causing the issue? Do I need to add some ad ...

html - automatically populating input fields when the page loads

Currently, I have an HTML form embedded in the view and I am looking for a way to automatically populate specific input fields with json variables obtained from the server. Instead of manually writing JavaScript code for each field, my goal is to access th ...

console displaying indentation problems with laravel and vue

I am currently utilizing Vue within Laravel and encountering a multitude of indentation errors in the console. https://i.sstatic.net/sfRec.png Here is an excerpt from my package.json file: "private": true, "scripts": { "clean": "rimraf public/buil ...

Angular 2 orderByPipe not displaying any results initially

At first, I thought the reason for not displaying anything initially was due to it not being async and returning an empty array. Everything worked fine without the pipe, but the posts weren't shown on startup. After submitting a post, all the posts ap ...

Concealing jQueryUI tooltip upon clicking a "target=_blank" link

I have implemented jQuery to display tooltips for all links on my webpage that include a 'details' attribute. $(function() { $tooltip = $(document).tooltip({ show: false, track: true, ...

Changing an integer to a character in the C programming language

#include<stdio.h> char* intToString(int N); int power(int N, int M) { int n = N; if (M ==0) return 1; int i; for( i = 1; i < M; i++) N*=n; return N; } int main() { printf("%s",intToString(100)); } char* intToSt ...

Working with String Arrays: How to eliminate null values

I'm facing an issue with my code. It currently returns 'null' in place of removing x completely and shifting all the other elements to the left. For instance, when I call the function with parameters {"a", "b", "c", "a"} and "a", it should r ...

Using JavaScript within SQL allows developers to combine the power

Every year, I need to insert a new primary key into my SQL database that follows a specific format (for example, in 2012 the key is 2012000000, and in 2013 the key is 2013000000). I want this process to happen automatically. My plan is to incorporate a sc ...

Executing axios within a JavaScript function without relying on global variables

I am currently exploring the usage of axios (https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.js) in a function to communicate with my backend and retrieve data. The snippet of code provided is functional. Instead of relying on a global variable ...

Using Angular's NgFor directive to loop through a list of items and trigger a click event

Is it possible to programmatically trigger a click event on a specific item within an ngFor loop? <ul> <li class="list" *ngFor="let ver of versions; (click)="versionView()">{{ver.name}}</li> </ul> ...

Is it possible to filter two arrays simultaneously?

I am dealing with two arrays: const array1 = [{ "id": "4521", "name": "Tiruchirapalli", "stateId": "101" }, { "id": "1850", ...

Nested Checkbox in a dropdown menu option

After successfully creating checkboxes inside a dropdownlist box, I am now attempting to have a checkbox appear once another checkbox is clicked. For example, when the user checks "Documents," a set of sub-checkboxes should appear below it. E.g. []Docume ...

"Looking for a quicker way to upload images without the hassle of a long input field? Learn how to use a glyphicon

Is there a way to use a symbol or glyphicon for uploading an image instead of having to use such a long input field? (Specifically for uploading a profile picture) I'd like the ability to click on the glyphicon and choose an image from my computer. T ...

Perform a native Fetch request using Proxy in NodeJS version 18

With the release of Node JS version 18, Fetch requests can now be made without the need to install additional packages like Axios. I am curious to know if it is possible to make a request using Native Fetch with Proxy without the need for any external pac ...

Nodes are currently being loaded in the JIT SpaceTree

I am currently trying to implement the SpaceTree from JIT and I could really use some assistance. The issue arises when I attempt to load the tree from another array. json.php <?php $temp = array( 'id' => "node02", 'name&apos ...