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.
Related
I'm following along on the Angular JS Tutorial and I was wondering if there is an alternate approach to how I'm modifying it.
Currently, I am returning data with a factory that is defined as such:
angular.
module('core.card').
factory('Card', ['$resource',
function($resource){
return $resource('cards/:cardId.json', {}, {
query: {
method: 'GET',
params: {cardId: 'cards'},
isArray: true
}
});
}
]);
This is all good and working, as cards.json has all of the cards available and that's exactly what I want to return.
The method that they're describing, such as dealing with a RESTful service, assumes that there are multiple other specific JSON files that could get returned based on the route. I understand how to use that with an actual service, but let's say I wanted to alter the returned JSON data before it gets bound to my module so I don't have a bunch of extra data that I don't need?
Lets say /cards/foo.json contains something like this:
[{
"id": "foo",
"name": "Bar",
"img": "foobar.png",
"unnecessaryKey": "remove me"
}]
But where would I write a function that only returns:
[{
"id": "foo",
"name": "Bar",
"img": "foobar.png"
}]
Would I assign it in the same place where the query function is, such as:
...
return $resource('cards/:cardId.json', {}, {
query: {
method: 'GET',
params: {cardId: 'cards'},
isArray: true
},
alterReturnedData: {
// doStuffToFormatData
}
});
...
Or would it be best to just modify it in my Component as I'm doing now?
function alterReturnedData(data){
// doStuffToFormatData
}
var unmodified = Card.get({cardId:'foo'}, function(){
self.data = alterReturnedData(unmodified);
});
I just feel like it'd be better to return the data from the Service I actually want to the Component Controller instead of having a lot of logic in there to skew it around.
Is my approach OK to run this function in the Controller?
Or is it best to alter it in the Service, and how would I do so?
I have a factory, which goes into a controller, and I am trying to get data from that display on an HTML page. I am having trouble specifying an Object's pathway however.
My Factory:
app.factory('APIMethodService', function() {
var Head = "api.example.com";
return {
apis:
[{
accounts: [
{
v1: [
{
uri: Head+"/v1/accounts/",
item1: "AccountNumber",
item2: "MoneyInAccount"
}],
v2: [
{
uri: Head+"/v2/accounts/",
item1: "AccountNumber",
item2: "MoneyInAccount"
}]
}
],
customers: [
{
v1: [
{
uri: Head+"/v1/customers/",
item1: "CustomerName",
item2: "CustomerID",
item3: "CustomerEmail"
}]
}
]
}]
};
});
My Controller:
app.controller('APIController', function($scope, APIMethodService) {
$scope.title = "API";
$scope.apiList = APIMethodService;
$scope.accountList = $scope.apiList.accounts.v1;
$scope.accountList2 = $scope.apiList[0][0];
});
My HTML
<div ng-controller="APIController">
<div id="api" class="row">
<div class="col-xs-12">
<div class="row" style="font-size:20px">
{{title}} Page!
<table class="table table-striped">
<tr ng-repeat="api in apiList | orderBy:'uri' | filter:search">
<td>{{api.uri}}</td>
<td>{{api.item1}}</td>
<td>{{api.item2}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
The errors I get are in regards to the Controller trying to parse out the individual objects I wish to grab, like accounts or customers, and then any version v#, they may have.
So it will say something such as
TypeError: Cannot read property 'v1' of undefined
I just need some help specifying the proper pathways into my factory service.
You have a few problems. First, you are referring to the object returned from the factory incorrectly. APIMethodService is the factory that you're injecting, so you need to first reference the object that that factory is returning like this:
APIMethodService.apis
This will give you your entire JSON object.
From there, the rest of your object is made up of arrays of objects, so referring to 'v1' won't do you any good. You need to specify an index instead. If you want v1, you'll need:
APIMethodService.apis[0].accounts[0].v1
This will give you the v1 array, which again is an array of objects.
Customers would be:
APIMethodService.apis[0].customers[0].v1
The first problem you have is that the factory returns an object with a single property called apis. So basically this $scope.apiList.accounts.v1 should be $scope.apiList.apis.accounts.v1. Bu that's not all as this won't either work since dotting(.) into apis is an array you'd have to use the index. In this case it would be $scope.apiList.apis[0] and then you could .accounts[0].v1 which is also an array containing a single object.
Now if you can I would suggest to you that you'd change how you represent this data structure.
This is how you could do it.
app.factory('APIMethodService', function() {
var Head = "api.example.com";
return {
accounts: {
v1: {
uri: Head+"/v1/accounts/",
items: ["AccountNumber","MoneyInAccount"]
},
v2: {
... // skipped for brevity
}
},
customer: {
... // code skipped for brevity
}
};
});
And then it's just a matter of dotting into your APIMethodService-object like APIMethodService.accounts.v1.items[0] if you want the AccountNumber method name.
Constructing your url could then be done like this.
var baseUrl = APIMethodService.accounts.v1.uri; // 'api.example.com'
var url = baseUrl + APIMethodService.accounts.v1.items[0]; // 'AccountNumber'
// url = "api.example.com/v1/accounts/AccountNumber"
Again, this is one way you could do it but this can be further enhanced upon. The examples I provided are simply for demo purposes and this is not in any way the only way to do it.
Expanding upon recieved comments/questions your service (and data representation) could now look like this.
app.factory('APIMethodService', function() {
var Head = "api.example.com";
return {
accounts: {
v1: {
uri: Head+"/v1/accounts/",
items: [
{
name:'AccountNumber',
description:'Show the account number'
},
{
name:'AccountOwner',
description:'Show information about the owner of the account'
},
{
name:'MoneyInAccount',
description:'Show money in the Account'
}
]
},
v2: {
... // skipped for brevity
}
},
customer: {
... // code skipped for brevity
}
};
});
// Get descriptions
var accountNumberDescription = APIMethodService.accounts.v1.items[0].description; // 'Show the account number'
var accountOwnerDescription = APIMethodService.accounts.v1.items[1].description; // 'Show information about the owner of the account'
var moneyInAccountDescription = APIMethodService.accounts.v1.items[2].description; // 'Show money in the Account'
By using objects with properties like this it's alot easier to understand what you are trying to do. With arrays with indexes you'd have to know or take a look at the source to see what's going on. Here, someone viewing your code they can instantly understand that it is the description you are getting.
I need to access JSON data from model, i used "this.model" in controller. From what i see in console log "this.model" is returning array of data arrays.
App.CardsRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON('/cards');
}
});
This is what is server on path /cards returning :
[[1317888000000,372.5101],[1317888060000,372.4]]
I want to use that data in my ember HighStock (from HighCharts) implementation. It's drawing chart with this manually entered data:
App.CardsController = Ember.ArrayController.extend({
series: [{
name : 'test',
type: 'area',
data :[[1317888000000,372.5101],[1317888060000,372.4]],
...
But not drawing with this:
App.CardsController = Ember.ArrayController.extend({
series: [{
name : 'test',
type: 'area',
data : this.model,
...
From what i see in console, this.model is returning not only array with arrays of data but other ember specific objects too, is that the problem? if yes then how to access only JSON returned data so i can use it in controller?
You can directly format the data in your router itself, after the promise is successful.
When the controller is initialized, this method also will run once and will intialise.
To setup the data from the controller itself, format the data after the json promise is successful.
Ex:
App.CardsRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON('/cards');
}.then(function(data){
return [{
name : 'test',
type: 'area',
data : data,
...
}]
});
After this in controller do this
The code is pasted in the jsbin http://jsbin.com/vekacayirugu/16/edit
This kind of formatting will work for you.
reference: http://emberjs.com/guides/object-model/computed-properties-and-aggregate-data/
I have a problem save data to my database using an ExtJS updateable grid.
I'm working with a REST API that I have written in Progress ABL.
The API is working but the Input JSON and Output JSON is very specific.
I can read the JSON data into my grid and display it, but when I want to save a new record the grid creates a wrong JSON output.
My output has to be like this:
{
"request":
{
"dsUsers":
{
"ttUsers":
[{"ID":20,"LOGIN":"test","PASS":"","ID_ADDR":0,"ID_CUST":0}]
}
}
}
But I'm not able to create the request and dsUsers groups in the writer.
I have tested a lot but I don't really know what I have to change to make it work.
Thanks
Base Ext.data.writer.Json allows you to define only root data property. However if you need more custom structure like this, you can quite easily create your own writer.
Your writer should extend from Ext.data.writer.Json and override writeRecords method. This method add records data into request.
In your case custom writer should look like this:
Ext.define('myWriter', {
extend: 'Ext.data.writer.Json',
writeRecords: function(request, data) {
var root = this.root;
if (this.expandData) {
data = this.getExpandedData(data);
}
if (this.allowSingle && data.length === 1) {
// convert to single object format
data = data[0];
}
request.jsonData = request.jsonData || {};
request.jsonData['request'] = {
'dsUsers': {}
};
request.jsonData['request']['dsUsers'][root] = data;
return request;
}
});
Then you can use your custom writer in model or store proxy:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
writer: Ext.create('myWriter', {
root: 'ttUsers',
mainRoot: 'dsUsers'
}),
url : '/users'
}
});
Of course you can create custom writer more configurable and reusable by defining name of "request" and "dsUsers" attributes in config.
Fiddle with example: https://fiddle.sencha.com/#fiddle/33l
How do I pass data between two different routes and templates?
I have a javascript file on the front end (client folder) that simply calls Router.go() passing in the post ID as one of my parameters.
Below are the three main culprits (I believe). I've removed most of the code to make it easier to read. I can change to the PostDetail page with no problems. I can also retrieve the PostId on the PostDetail page from the Router. My problem is, the database entry (POLL) that is retrieved does not get rendered on the template. Hence {{Question}} is always blank even though the database entry is being returned.
Let me know if I should post more information.
FrontEnd.js
Template.PostTiles.events({
// When a choice is selected
'click .pin' : function(event, template) {
Router.go('Post', {_PostId: this.PostId});
}
});
post-detail.html
<template name="PostDetail">
<h3>{{Question}}</p>
</template>
Shared.js
Router.map( function() {
this.route('Home', {
path: '/',
template: 'PostTiles',
data: {
// Here we can return DB data instead of attaching
// a helper method to the Template object
QuestionsList: function() {
return POLL.find().fetch();
}
}
});
this.route('Post', {
template: 'PostDetail',
path: '/Post/:_PostId',
data: function() {
return POLL.findOne(this.params._PostId);
},
renderTemplates: {
'disqus': {to: 'comments'}
}
});
});
----- Update -----
I think I've narrowed down the issue to simply being able to render only one Database entry, instead of a list of them using the {{#each SomeList}} syntax.
Looks like you found the answer / resolved this, but just in case, I think it's in your findOne statement:
data: function() {
return POLL.findOne(this.params._PostId);
},
should read:
data: function() {
return POLL.findOne({_id:this.params._PostId});
},
(assuming that POLL has your posts listed by _id.
Hope that helps.
Could you pass the info in the Session? the docs for that are here http://docs.meteor.com/#session. That's what I'm planning on doing.