Develop Reference

Passing $.getJSON object to another ember controller

So I'm struggling to get this to work. Maybe my approach is not good. I'm quite a noob at using a Frontend framework like ember.js.
So, I've got a $.getJSON request obtaining a JSON data from a local file. The problem is that I need to pass this data, not to the template but to another object inside one ember controller.
I'm trying to use ember-CLI-charts to I need to return the object in the last lines of the property.
diffData: Ember.computed('model', function(){
let url = "log_hr24_diff.json";
let diff_data = Ember.$.getJSON(url);
return {
labels: ['Difficulty', 'Date'],
datasets: [
{
label: "Difficulty",
data: diff_data
},
{
label: "Date",
data: date_data
}
]
}
})
So that is not working. Either do this:
let diff_data = Ember.$.getJSON(url).then(function(data){
return Ember.Object.create(data);
});
So how do I get the JSON object from the diff_data JSON response to pass it to the return object?
Tried and search it a lot, but couldn't find an answer.
Thanks in advance!

It makes more sense to create a service, that way you can consume(in simpler words "use") your getJson call inside many controllers (or components and models), and change the url each time if you wish.
It makes sense when looking at making your code reusable.
To do this, you'll want to make a service through the CLI.
Ember g service someServiceName
Then your service might look a little like this:
import Ember from 'ember';
export default Ember.Service.extend({
getUrlData(url){
let data = Ember.$.getJSON(url);
return data.then((json) => {
let records = [];
json.forEach(function(item){
records.push(item);
});
return records;
});
}
});
For any advanced readers, i've avoided destructuring(ie - using a const) to avoid confusion for the OP.
And back in your controller, you may write something similar to:
import Ember from 'ember';
export default Ember.Controller.extend({
serviceToUse: Ember.inject.service('some-service-name'),
diffData: Ember.computed('model', function(){
let url = "log_hr24_diff.json";
let diff_data = this.get('serviceToUse').getUrlData(url);
//parse returnedData or put it in a new variable to use as you see fit.
return {
labels: ['Difficulty', 'Date'],
datasets: [
{
label: "Difficulty",
data: diff_data
},
{
label: "Date",
data: date_data
}
]
}
})
Now in the handlebar file for this controller, you can access the data from your controller like so:
{{diffData.labels}} //outputs "Difficulty,Date". You can loop through the datasets property yourself.
Beginner's hint - file names should match each other, that's how Ember knows how to link files. This does not always have to be true, but for now stick to that rule.
This should get you where you want to go. It works on my machine.

So finally I found the correct way its mean to be coded in ember (or a way to do it).
I realized that I need to return the diff and date data into the model. So i've done this.
routes/index.js
url = "log_hr24_diff.json";
var diff_data = Ember.$.getJSON(url, function(data){
return Ember.Object.create(data);
});
url = "log_hr24_dates.json"
var dates_data = Ember.$.getJSON(url, function(data){
return Ember.Object.create(data);
});
export default Ember.Route.extend({
model(){
return Ember.RSVP.hash({
price: price_data,
chart_diff: diff_data,
chart_dates: dates_data
});
},
});
Then in the main index controller file, just use this model data to pass the json data to the correct final object:
controllers/index.js
export default Ember.Controller.extend({
applicationController: Ember.inject.controller('application'),
diffData: Ember.computed('model', function(){
return {
labels: this.get('model.chart_dates'),
datasets: [
{
label: "Difficulty",
data: this.get('model.chart_diff')
}
]
}
})
});
So that's for me a correct way of doing things out on ember. Getting data in the model, passing data into the controller for logic workarround and finally pass the resulting object to the view.

Sequelize: .createAssociation() or .setAssociation doesn't update the original object with created data

I've been stuck on this for a while. Take the following code as an example:
models.Summoner.findOne({
include: [{ model: models.RankedStats, as: 'SummonerRankedStats', required: true }],
where: { summonerId: summonerId, server: server }
}).then(function(summoner) {
models.RankedStats.create({
totalWins: 0,
totalLosses: 0
}).then(function(rankedStats) {
summoner.setSummonerRankedStats(rankedStats).then(function() {
console.log(summoner.SummonerRankedStats)
//This outputs undefined
summoner.getSummonerRankedStats().then(function(srs) {
console.log(srs)
//This outputs the RankedStats that were just created
})
models.Summoner.findOne({
include: [{ model: models.RankedStats, as: 'SummonerRankedStats', required: true }],
where: { summonerId: summonerId, server: server }
}).then(function(summoner) {
console.log(summoner.SummonerRankedStats)
//This outputs the SummonerRankedStats object
})
})
})
})
So, to put it simply... If I have a Summoner (var summoner) and perform a .setAssociation() or .createAssociation() on it, and then log summoner, the data created isn't there. If I fetch it again from the database (with .getAssociation() or by searching for that Summoner again) I can access it, but I was hoping to avoid that extra DB call.
Is there a way to add this information to the original object when using .create() or .set()? It can be achieved by doing something like:
summoner.dataValues.SummonerRankedStats = rankedStats
But that seems somewhat hacky :)
Is there a correct way to do it, or does it even make any sense?
Thanks in advance!

AngularJS localstorage for a factory

I am a newbie to IonicFrameWork and was following their "starter tab" template and made a few modifications to "delete" and "bookmark" items from a factory.
My books.js which contains the factory looks as follow:
.factory('Books', function() {
// books data
var books = [{
id: 0,
title: 'Sample Title',
author: 'Sample Author',
category: 'Horor, Fiction',
cover: '/cover.jpeg',
details: 'some details about the book',
chapters: [
{
id : 1,
name: 'Chapter 1',
filename: 'chapter1.html',
},
{
id : 2,
name: 'Chapter 2',
filename: 'Chapter2.html',
}
]
}
.....
return {
all: function() {
return books;
},
// remove a book from the list
remove: function(book) {
books.splice(books.indexOf(book), 1);
},
and my controllers.js looks like this:
....
.controller('DashCtrl', function($scope, Books) {
$scope.books = Books.all();
$scope.remove = function(book) {
Books.remove(book);
};
})
.controller('singlebookCtrl', function($scope, $stateParams, Books){
$scope.book = Books.get($stateParams.bookId);
$scope.toggleIcon = function ($evemt, iconName, book){
var buttonClasses = $event.currentTarget.className;
// add the book to favorite
if (....){
book.isFavorite = true;
}
// remove the book from favorite
else {
book.isFavorite = false;
}
....
when I exit the app and open it again, the deleted item is back and favorite items are gone.
When searching for a solution , I came across this article which states I should use window.localstorage. But not sure how I should apply this method for a factory.

I personnaly prefer using ngStorage that makes it very simple and straight forward to use localStorage & sessionStorage.
For example, after injecting the dependency in your controller you can:
Set a variable :
$scope.favList = [1, 4, ...]
$scope.jsonList = { ... }
$localStorage.favLists = $scope.favList;
$localStorage.jsonList = $scope.jsonList;
Access a variable, Simply access to localStorage value :
var favList = $localStorage.favLists;

For all intents and purposes you can treat Local Storage just as if it were a key/value store, like a javascript object. So if you want to save a value in local storage, just do it like the following.
window.localStorage["bookOne"] = "STRING HERE"
Or if you want to save a javascript object:
window.localStorage["bookOne"] = JSON.stringify({a:b})
And it should persist between page reloads.

The real issue here is that in your code, you are setting books on each load with var books = .... Every time you reload the application it will re-apply books and favourites will be lost. So beyond just saving it to window.localStorage you will also have to read from local storage and assign it to your books and favourites variables when your app loads in order to see the changes that were previously made.

You can simply do it with angular-local-storage module, here's some example based on your problem.
angular.module('app', ['LocalStorageModule'])
.factory('Books', function(localStorageService) {
// favorites list(books id)
var favList = [1, 2, 3, ...];
// ....
return {
remove: function(id) {
favList.splice(favList.indexOf(id), 1);
// sync with localStorage
localStorageService.set(favorites, favList);
},
// ....
}
});
Note that you can simply use angular-local-storage#bind and bind specific scope-key to this service that automatically do this synchronisation for you. for example:
// Inside your controller
$scope.favList = [1, 4, ...]
// returns a deregistration function for this listener.
$scope.unbind = localStorageService.bind($scope, 'favList');

How to add a new object to an array nested inside an object?

I'm trying to get a handle on using $resource in angularjs and I keep referencing this answer AngularJS $resource RESTful example for good examples. Fetching a record and creating a record work fine, but now i'm trying to add a "section" to an existing mongo record but can't figure it out.
documents collection
{
_id: 'theid',
name: 'My name",
sections: [
{
title: 'First title'
},
{
title: 'Second title'
}
]
}
angular controller snippet
var document = documentService.get({_id: 'theid'});
// TRYING TO ADD $scope.section TO THE SECTIONS ARRAY IN THE VARIABLE document.
//document.sections.push($scope.section); <-- This does NOT work
//document.new_section($scope.section); <-- could do this and then parse it out and insert it in my backend code, but this solution seems hacky and terrible to me.
document.$save(function(section) {
//$scope.document.push(section);
});
documentService
return $resource(SETTINGS.base + '/documents/:id', { id: '#id' },
{
update: { method: 'PUT' }
});
From the link i posted above, If I was just updating the name field, I could just do something like this:
var document = documentService.get({_id: 'theid'});
document.name = "My new name";
document.$save(function(section) {
//$scope.document.push(section);
});
I'm just trying to add an object to a nested array of objects.

Try this:
documentService.get({_id: 'theid'}, function(document) {
document.sections.push($scope.section);
document.$save();
});

AngularJS resourse structure for API

I have structure API:
api: {
users: {
details: {},
actions: {}
},
settings: {
users: {}
}
}
for example:
GET /api/users
return list of users
GET /api/users/1
return user with id 1
GET /api/users/1/details
return user deteils
GET /api/users/1/details/photo
return user fetail with alias photo
I wrote
.factory('userService', function($resource){
return $resource('/api/users/:id/:items/:itemsId', {}, {
query: { method: 'GET', isArray: false }
});
});
now I can do userService.query() and get list of users
but if I can`t do as this:
var users = userService.query();
users[1].name = 'newName';
users[1].save();
users[1] dont save edited info because users[1] dont have resourse methods, resourse methots isset only users.
And I can`t do as this:
var users = userService.query();
users[1].get('deteils');
How I can add resourse methods for all my structure?

First of all you have to prefix instance methods with a $ sign, like users[1].$save().
Then why are you setting isArray to false but treat the result like an array?
You should also bind the id paramter to the id property of your user. I assume it is called id.
So you would do something like this:
.factory('userService', function($resource){
return $resource('/api/users/:id/:items/:itemsId', { id: '#id' });
});
Note that you have to specify the parameters items and itemsId in your call, otherwise they will be left out.
e.g.:
var users = userService.query();
users[1].name = 'newName';
// assume users[1].id===1
users[1].$save();
// will do a POST /api/users/1
users[1].$get({ items: 'details' });
// will do a GET /api/users/1/details
users[1].$get({ items: 'details', itemsId: 'photo' });
// will do a GET /api/users/1/details/photo
PS: Maybe you should also check if the default methods (listed here) fits your REST API, otherwise you should define your own.