Difference between utility and helper in ember js?

Can someone please explain the difference between utils and helper in Ember js?

How to use helper in ember js?

Can somebody explain with an example about yield helper which is used while using with components in ember js ?

Matching genre ids with genre names in TMDb with JavaScript

I'm sure a lot have used the TMDb api for movies. But I'm having issues with displaying genre names for each movie displayed. I'm trying to match genre_ids from the movies api with genres from genre api. But I don't get the desired result.

JS (with Ember.js v3.4)

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  movieGenreIds: computed('movies.@each.genre_ids', function() {
    return this.movies.map(movie => movie.genre_ids).reduce((a, b) => [...a, ...b]);
  }),

  genresNames: computed('movieGenreIds', 'genres', 'movies', function() {
    let names = [];

    this.genres.map((genre) => {
      this.movieGenreIds.forEach(movieGenreId => {

        if (parseInt(genre.id) === movieGenreId) {
          names.push(genre.name);
        }
      })
    })

    return names;
  }),
});

Movies API (each movie from the array has this structure):

{
  "vote_count": 1092,
  "id":335983,
  "video": false,
  "vote_average": 6.7,
  "title": "Venom",
  "popularity": 505.173,
  "poster_path": "\/2uNW4WbgBXL25BAbXGLnLqX71Sw.jpg",
  "original_language": "en",
  "original_title": "Venom",
  "genre_ids": [27,878,28,53,35], // <-- I'm interested in this property
  "backdrop_path": "\/VuukZLgaCrho2Ar8Scl9HtV3yD.jpg",
  "adult": false,
  "overview": "When Eddie Brock acquires the powers of a symbiote, he will have to release his alter-ego “Venom” to save his life.",
  "release_date": "2018-10-03"
}

Genres API

"genres":[
  {"id":28,"name":"Action"},
  {"id":12,"name":"Adventure"},
  ...
]

How to achieve ArrayController sort functionality from controller in Ember 2.1.8

I have a model where there are relationships which are async=true and i have multiple properties like that.

code is used to do the sorting using arraycontroller where those hasmany async true relationships were not loaded. so how to achieve the same thing from controller which is bring up by ember 2.x?

this is under computed property

    var coordinators = this.get( 'model.coordinators' ),
    var  professors   = this.get( 'model.professors' ),

        coordinators.forEach( function( person ) {

            people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'coordinators', title:'Coordinator', selected:false } ) ); } );

  if ( getFilter === 0 || getFilter === 1 ) {

      tabPeople.pushObjects( people.filterBy( 'role', 'coordinators'));
      tabPeople.pushObjects( people.filterBy( 'role', 'directors' ));

    }

    arrayController = Ember.ArrayController.create( {
        model: tabPeople,
       sortProperties: [ 'person.lastName' ],
      sortAscending: true
        } );

tabPeople is an array of models which is created with a computed property. this arrayController passed to another computed property to filter some results after sorting.

model

  coordinators: DS.hasMany( 'profile', { async: true } ),
  directors: DS.hasMany( 'profile', { async: true } ),
  professors: DS.hasMany( 'profile', { async: true } ),
  students: DS.hasMany( 'profile', { async: true } ),
  advisors: DS.hasMany( 'profile', { async: true } ),

Ember Simple Auth login errors not displaying on page

I am following an online video tutorial that has setting up Ember Simple Auth Login. Everything works with exception to displaying login errors (i.e., 401 unauthorized) to the template. I have checked the code for typos but cannot find any.

In the controller login, I tried logging the e.errors to the console, but the console just says 'Undefined'. Though, if I just send the error object e to the log then I get the error object with the error.detail inside of it. Note: the error.detail is what I am trying to display on the login-form.hsb.

Any help is appreciated!

• Ember : 3.4.5
• Ember Data : 3.4.2
• jQuery : 3.3.1
• Ember Simple Auth : 1.7.0

Controllers/login.js

import { inject as service } from '@ember/service';
import Controller from '@ember/controller';

export default Controller.extend({
    session: service('session'),

    actions: {
        login(attrs) {
            this.get('session').authenticate('authenticator:jwt', {
                email: attrs.email,
                password: attrs.password
            }).then(() => {
                this.transitionToRoute('index');
            }).catch((e) => {
                this.set('errors', e.errors); // nothing is being displayed
                console.log(e.errors); // Says Undefined in the console
                console.log(e); // Display error to console
            });
        }
    }
});

templates/login.hsb

templates/components/login-form.hbs

<div class="slide-out">
    <div class="slide-out-card">
        <div class="slide-out-heading">
            <div class="title">
                <h3>Login</h3>
            </div>
        </div>

        <div class="slide-out-content">
            <form onsubmit=>
                <!-- this does not display the error message -->
                
                    
                    <div class="error-alert"></div>
                
                <div class="field">
                    <label>Email:</label>
                    
                </div>

                <div class="field">
                    <label>Password:</label>
                    
                </div>

                <div class="form-footer">
                    <button type="submit" class="btn-submit">save</button>
                </div>
            </form>
        </div>
    </div>
</div>

Ember.js: Converting vanilla array into Ember array not working

I have an array that I'm converting to Ember array with A() as I want to use some of Ember array methods, like filterBy(), but it's not producing the result I want. What is the proper way to convert a vanilla array into an Ember array?

Ember:

import Component from '@ember/component';
import { computed } from '@ember/object';
import { A } from '@ember/array';

export default Component.extend({
  movieGenreIds: computed.map('movies', function(movie, index) {
    return movie.genre_ids;
  }),

  genresNames: computed('movieGenreIds', 'allGenres', function() {
    let genresArray = A(this.get('genres')); // <--- conversion here

    this.get('movieGenreIds').forEach((movieGenreId, movieGenreIndex) => {
      console.log('MOVIE_GENRE_IDS!!!', genresArray);
      console.log('FILTERBY ID^^^', genresArray.filterBy('id', movieGenreIds.toString())); // <-- not returning desired results
    });
  }),
});

Ember route (data is from themoviedb api and models represent the data structure in the json provided):

import Route from '@ember/routing/route';
import RSVP from 'rsvp'

export default Route.extend({
  model() {
    return RSVP.hash({
      movies: this.store.findAll('movie'),
      genres: this.store.findAll('genre'),
    })
    .then(data => data);
  },
});

Sending data to an Ember template

I have a question about sending data to an ember template. I have an array with the data :

var data = [ {
    "Coefficients": "Herkomst ouders: Een van de ouders Nederlands en de andere 
     niet Nederlands",
    "Categorie": "Herkomst",
    "Name": "Een van de ouders Nederlands en de andere niet Nederlands",
    "Gewicht": "-0,08943"
  },  {
    "Coefficients": "Type huishouden: Eenouderhuishouden",
    "Categorie": "Type huishouden",
    "Name": "Eenouderhuishouden",
    "Gewicht": "0,49608"
  }]

I have a lot more data in it with diffrent category's (Categorie). In the same file I have this code :

var data_prepped = [];
for (var i = 0; i < data.length; i++) {

  var new_cat = true;
  for (var j = 0; j < data_prepped.length; j++) {
    if (data_prepped[j].Categorie === data[i].Categorie) {
      new_cat = false;
    }
  }

  if (new_cat) {
    data_prepped.push({
      'Categorie': data[i].Categorie,
      'Antwoorden': []
    });
  }

  for (var j = 0; j < data_prepped.length; j++) {
    if (data_prepped[j].Categorie === data[i].Categorie) {
      data_prepped[j].Antwoorden.push({
        'Coefficients': data[i].Coefficients,
        'Name': data[i].Name,
        'Gewicht': data[i].Gewicht,
      });
    }
  }
}

export default Route.extend({
    model() {
        return data_prepped;
    }
}); 

In my template file from ember I run this code :

<section class="category">
                    <h1>Algemeen</h1>
                
                        <h5></h5>
                    <select class="" name="">
                                         
                            <option data-weight="" name="">
                                
                            </option>
                        
                    </select>
                
            </section>

This is working for me but it give me back all the data from the array. But I only want just a part of the data for example this category : "Categorie": "Type huishouden". How can I fix this?