We Keep Coding

How to put Value from JSON API to Angular Template Directive

iam newbie and i want to ask.
i want to get some value from JSON API (title, course_id, etc), and put the Value to my Template with Directive. so at Index, i can repeat my tempalate with data from the API.
How to get Value from that JSON ?
This my Code :
my API
{
"count": 1,
"next": null,
"previous": null,
"results": [
{
"url": "http://192.168.1.37:8000/api/courses/a/",
"title": "I Love You", <-- I want to put this Value to my Template
"course_id": "1",
"starting_date": "2016-10-03"
}
]
}
Controller demo.js
demo.controller("demo", function($scope, $http) {
$http.get('http://192.168.1.37:8000/api/courses/'). <-- Data From my API
then(function(response) {
$scope.courses = response.data;
});
});
demo.directive("demoItemDirective", function() {
return {
scope : { demoInfo : "=info"},
templateUrl : "/app/demo.tmpl" <-- My Template
};
});
My Template demo.tmpl
<p>{{demoInfo.count}}</p> <-- Works, count Displayed
<p>{{demoInfo.results.title}</p> <-- Not works, title not displayed
My Index.html
<div ng-repeat="group in courses | groupCount:2">
<div ng-repeat="x in group">
<demo-item-directive info="x"></demo-item-directive>
</div>
</div>

It should be
<p>{{demoInfo.results[0].title}</p>
Your result contain an Array of object.
You need to access with index.

According to your post, the result is an array:
"results": [
{
"url": "http://192.168.1.37:8000/api/courses/a/",
"title": "I Love You", <-- I want to put this Value to my Template
"course_id": "1",
"starting_date": "2016-10-03"
}
]
Thus, you can't refer to the title itself, you have to reference the first element:
{{demoInfo.results[0].title}}

Cannot read json response properties in angular.js controller

I am using Angular.js controller named 'forecastController'.
Angular.js Controller code is:
weatherApp.controller('forecastController',
['$scope','$routeParams','cityService', 'weatherService', function($scope, $routeParams , cityService, weatherService)
{
$scope.city=cityService.city;
$scope.days=$routeParams.days || '2' ;
$scope.weatherResult=weatherService.GetWeather($scope.city, $scope.days); //I get valid json response, the format is mentioned down below.
console.log($scope.weatherResult.city.name); //Not working, this is the problem
}]);
Json object '$scope.weatherResult' is:
{
"city":
{
"id": 2643743,
"name": "London",
"coord": {
"lon": -0.12574,
"lat": 51.50853
},
"country": "GB",
"population": 0
},
"cod": "200"
}
My service is
weatherApp.service('weatherService', ['$resource',function($resource){
this.GetWeather=function(city, days){
var weatherAPI=$resource("http://api.openweathermap.org/data/2.5/forecast/daily?APPID={{MY_API_KEY_GOES_HERE}}",{
callback:"JSON_CALLBACK"}, {get:{method:"JSONP"}});
return weatherAPI.get({q:city, cnt:days});
};
}]);
My 'forecastController' receives valid $scope.weatherResult. And in the HTML view I can access weatherResult json object properties. I have ensured it properly. For an example, {{weatherResult.city.name}} works. But, if I try to print in console.log inside my 'forecaseController' I get value undefined. The json data I am getting is from http://openweathermap.org/api
The error I get is:
TypeError: Cannot read property 'name' of undefined
at new <anonymous> (http://127.0.0.1:50926/controllers.js:19:42)
at e (https://code.angularjs.org/1.3.0-rc.2/angular.min.js:36:215)
at Object.instantiate (https://code.angularjs.org/1.3.0-rc.2/angular.min.js:36:344)
at https://code.angularjs.org/1.3.0-rc.2/angular.min.js:72:460
at link (https://code.angularjs.org/1.3.0-rc.2/angular-route.min.js:7:268)
at Fc (https://code.angularjs.org/1.3.0-rc.2/angular.min.js:68:47)
at K (https://code.angularjs.org/1.3.0-rc.2/angular.min.js:57:259)
at g (https://code.angularjs.org/1.3.0-rc.2/angular.min.js:49:491)
at https://code.angularjs.org/1.3.0-rc.2/angular.min.js:49:99
at https://code.angularjs.org/1.3.0-rc.2/angular.min.js:50:474 <div ng-view="" class="ng-scope">

Your service weatherService.GetWeather likely returns a promise. Until that promise is resolved, the properties in your $scope.weatherResult object will be undefined. Use the promise then method:
$scope.weatherResult = weatherService.GetWeather($scope.city, $scope.days);
$scope.weatherResult.$promise.then(function() {
console.log($scope.weatherResult.city.name);
});
Update: As per my comment, the service is returning a $resource object. This object has a $promise property.
Link To Codepen

Ember.js find() does not work with parameters

I'm trying a simple post retrieval app with ember. Everything works fine as long as i'm not passing arguments to the find() function:
This works great:
return this.store.find('post')
But not these:
return this.store.find('post', { title: 'title1' })
return this.store.find('post', {})
The server returns exactly the same JSON regardless of the parameters, but Ember doesn't seem to process it when there's arguments. The store stays empty.
Here's the complete code:
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function(){
this.resource('myPosts');
});
App.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'api/v1/'
});
App.Post = DS.Model.extend({
title : DS.attr( 'string' ),
body : DS.attr( 'string' )
});
App.MyPostsRoute = Ember.Route.extend({
model : function() {
return this.store.find('post', { title: 'title1' })
},
setupController: function (controller, model) {
controller.set('model', model);
}
});
In all cases I never get any error, the queries are processed just fine and I've checked in chrome DevTools that the JSON returned by the server is the same.
Here's the JSON returned.
{"post": [{"body": "a body", "title": "title1"}]}
The handelbars template is simply:
<script type="text/x-handlebars" id="myPosts">
<div class = "postsWrapper">
{{#each}}
<div>{{this}}</div>
<div>title: {{title}}</div>
{{/each}}
</div>
</script>
Here's the output i get with this.store.find('post', { title: 'title1' }):
<App.Post:ember382:null>
title:
Here's the one with i get with no parameters:
<App.Post:ember294:null>
title: title1
Thanks for you help.

Ok after further conversation, I think your issue is linked to the API.
When you call this.store.find('post') Ember should make a GET request to the api/v1/posts endpoint, which should return the following JSON:
Note: this is a plural posts object with an array of post objects.
{
"posts": [
{ "body": "body1", "title": "title1" },
{ "body": "body2", "title": "title2" }
]
}
When you call this.store.find('post', { title: 'title1' }) Ember should make a GET request to the api/v1/posts?title=title1 endpoint, which should return this JSON:
Note: this is a singular post object with a single post object.
{
"post": { "body": "body1", "title": "title1" }
}
The format the JSON comes back from the server is really important, the API needs to do the filtering, Ember doesn't filter unless you ask it to.

Ember-Data: How do "mappings" work

I'm currently trying to put something together with ember + emberdata + router + asp.net web api. Most of it seem to work, however I stuck in an error message I get when ember-data tries to findAll through the adapter for my models.
In my backend I have a model like this (C#):
public class Genre {
[Key]
public int Id { get; set; }
[Required]
[StringLength(50, MinimumLength=3)]
public string Name { get; set; }
}
Which in my app I represent it like this using ember-data:
App.Genre = DS.Model.extend({
id: DS.attr("number"),
name: DS.attr("string")
}).reopenClass({
url: 'api/genre'
});
I have also a Store defined in my App using the RESTAdapter like so:
App.store = DS.Store.create({
revision: 4,
adapter: DS.RESTAdapter.create({
bulkCommit: false
})
});
And the store is used in my controller as below:
App.GenreController = Ember.ArrayController.extend({
content: App.store.findAll(App.Genre),
selectedGenre: null
});
The router is defined as
App.router = Em.Router.create({
enableLogging: true,
location: 'hash',
root: Ember.Route.extend({
//...
genre: Em.Route.extend({
route: '/genre',
index: Ember.Route.extend({
connectOutlets: function (router, context) {
router.get('applicationController').connectOutlet('genre');
}
})
}),
//...
})
})
When I run my application, I get the following message for every object that has this same structure:
Uncaught Error: assertion failed: Your server returned a hash with the
key 0 but you have no mappings
For reference, here's the json the service is returning:
[
{
"id": 1,
"name": "Action"
},
{
"id": 2,
"name": "Drama"
},
{
"id": 3,
"name": "Comedy"
},
{
"id": 4,
"name": "Romance"
}
]
I cannot tell exactly what the problem is and since the assertion is mentioning that I need mapping, I'd like to know:
What this mapping is and how to use it.
Since the returned json is an array, should I be using a different type of controller in my app ,or is there anything I should know about when working with this type of json in ember-data? or should I change the JsonFormatter options in the server?
Any help is welcome.
I can definitely add more information if you feel this isn't enough to understand the problem.
EDIT: I've changed a few things in my backend and now my findAll() equivalent action in the server serializes the the output as the following json:
{
"genres": [
{ "id": 1, "name": "Action" },
{ "id": 2, "name": "Drama" },
{ "id": 3, "name": "Comedy" },
{ "id": 4, "name": "Romance" }
]
}
But I still can't get it to populate my models in the client and my error message has changed to this:
Uncaught Error: assertion failed: Your server returned a hash with the
key genres but you have no mappings
Not sure what else I might be doing wrong.
The method that throws this exception is sideload and checks for the mappings like this:
sideload: function (store, type, json, root) {
var sideloadedType, mappings, loaded = {};
loaded[root] = true;
for (var prop in json) {
if (!json.hasOwnProperty(prop)) { continue; }
if (prop === root) { continue; }
sideloadedType = type.typeForAssociation(prop);
if (!sideloadedType) {
mappings = get(this, 'mappings');
Ember.assert("Your server returned a hash with the key " + prop + " but you have no mappings", !!mappings);
//...
This call sideloadedType = type.typeForAssociation(prop); returns undefined and then I get the error message. The method typeForAssociation() checks for the for 'associationsByName' key which returns an empty Ember.Map.
Still no solution for this at the moment.
By the way...
My action is now like this:
// GET api/genres
public object GetGenres() {
return new { genres = context.Genres.AsQueryable() };
}
// GET api/genres
//[Queryable]
//public IQueryable<Genre> GetGenres()
//{
// return context.Genres.AsQueryable();
//}
I had to remove the original implementation which gets serialized by json.NET as I could not find config options to produce a json output as Ember-Data expects ( as in {resource_name : [json, json,...]}). Side effect of this is that I've lost built-in OData support, but I'd like to keep it. Does anyone know how could I configure it to produce different json for a collection?

The mapping can be defined in the DS.RESTAdapter. I think you could try to define something like this:
App.Store = DS.Store.extend({
adapter: DS.RESTAdapter.create({
bulkCommit: true,
mappings: {
genres: App.Genre
},
// you can also define plurals, if there is a unregular plural
// usually, RESTAdapter simply add a 's' for plurals.
// for example at work we have to define something like this
plurals: {
business_process: 'business_processes'
//else it tries to fetch business_processs
}
}),
revision: 4
});
Hope this resolves your problem.
Update:
At this time, this is not well documented, I don't remember if we found it by ourself reading the code, or perhaps Tom Dale pointed on it.
Anyway, here is the point for plurals
For the mappings, I think we were driven by the same error as you, and either we tried, either Tom teached us about this.

The RESTAdapter expects the returned JSON to be of the form:
{
"genres": [{
"id": 1,
"name": "action"
},{
"id": 2,
"name": "Drama"
}]
}
The tests are a good source of documentation, see https://github.com/emberjs/data/blob/master/packages/ember-data/tests/unit/rest_adapter_test.js#L315-329

I'm using Ember Data rev. 11 and it seems that the plurals config in DS.RESTAdapter.create never works. I looked into the codes and found a solution as following:
App.Adapter = DS.RESTAdapter.extend({
bulkCommit: false
})
App.Adapter.configure('plurals', {
series: 'series'
})

The confuse about use jquery $.ajax to read javascript file

suppose I have a config javascript file:
window.Config = {};
Config.UI = {
"Area": {},
"Layer": {},
"Sprites": {},
"Audio": {}
};
Config.UI.Area = {
"prop": {
"uuid": {
"_type": "string",
},
"frame": {
"_type": "rect",
"_value": {
"x": "0",
},
"_aka": "frame"
},
"zIndex": {
"_type": "string",
}
},
then I want use $.ajax to read this file:
$.ajax({
url:'js/config.js',
success:function (data, textStatus) {
console.log(data);
}
})
the question is how can I get some key's value in the config,by use the data $.ajax return?
like the "Config.UI" or the 'uuid' in ui.area.prop?Or can I convert them to json?

Rather than use AJAX, why not just insert a script?
var script = $('<script>');
script.attr('type', 'text/javascript');
script.attr('src', 'js/config.js');
script.bind('load', function() {
// use window.Config
});
script.appendTo('head');

icktoofay has a good suggestion, and the issue with the jQuery.ajax call looks to be a missing dataType: 'script' option which will evaluate the response and should give you object access. You might want to look into jQuery.getscript() as well.

I find it very useful and powerful to store data on the server as javascript objects and read them using Ajax. And it is very easy to do. Let me give you an example from an educational application I have written.
This is an example table of contents file (l1contents.js) that I would store on the server:
{
title : "Lesson 1",
topics : [
{name : "Topic 1", file : "l1t1data.js" },
{name : "Topic 2", file : "l1t2data.js" },
]
}
This is the javascript code I use to process the file:
$.ajax({
url : contentsFileName, // would be set to 'l1contents.js'
dataType : 'text', // yes this is correct, I want jquery to think this is text
cache : false,
success: function(data) {
var contentsObj = eval('(' + data + ')');
var lessonTitle = contentsObj.title;
for (var i = 0; i < contentsObj.topics.length; i++) {
var topic = contentsObj.topics [i];
// process topic.name and topic.file here
}
}
});
Obviously, this is simplified, but hopefully you get the idea. I simply use eval to set the object. And note that I don't even need any javascript code defining the structure of contentsObj. (I, of course, do have extensive comments defining the structure of my objects, but they are simply comments, not code.)

if your json file contains json data than you can use parseJSON() , toJSON() method.
and another solution is use eval(), this conver json data to javascript object so you can easly get a value by giving key.