I have an backbone application that collects data from an api the data from the api looks like this,
{
"id": "117",
"name": "Another new organisation",
"slug": "another-new-organisation",
"information": "",
"type": "organisation",
"notifications": "0",
"add_all": "0",
"created_at": "2015-01-13 17:29:45",
"updated_at": "2015-01-13 17:29:45",
"projects": [
{
"id": "131",
"name": "sdasdasdas",
"description": null,
"total_cost": "12312.00",
"start_date": "2015-01-14",
"finish_date": "2015-01-23",
"status": "1",
"sales_person": null,
"project_manager": null,
"client_id": "0",
"organisation_id": "117",
"owner_id": null,
"user_id": "1",
"created_at": "2015-01-28 18:36:55",
"updated_at": "2015-01-28 18:36:55",
"pivot": {
"organisation_id": "117",
"project_id": "131"
},
"clients": null
},
{
"id": "132",
"name": "another test",
"description": null,
"total_cost": "23131.00",
"start_date": "2015-01-07",
"finish_date": "2015-01-16",
"status": "1",
"sales_person": null,
"project_manager": null,
"client_id": "0",
"organisation_id": "117",
"owner_id": null,
"user_id": "1",
"created_at": "2015-01-28 18:38:45",
"updated_at": "2015-01-28 18:38:45",
"pivot": {
"organisation_id": "117",
"project_id": "132"
},
"clients": null
},
{
"id": "133",
"name": "yest another test",
"description": null,
"total_cost": "99999999.99",
"start_date": "0000-00-00",
"finish_date": "0000-00-00",
"status": "1",
"sales_person": null,
"project_manager": null,
"client_id": "0",
"organisation_id": "117",
"owner_id": null,
"user_id": "1",
"created_at": "2015-01-28 18:39:25",
"updated_at": "2015-01-28 18:39:25",
"pivot": {
"organisation_id": "117",
"project_id": "133"
},
"clients": null
},
{
"id": "134",
"name": "dsadasdasdassas",
"description": null,
"total_cost": "23213.00",
"start_date": "2015-01-21",
"finish_date": "2015-01-29",
"status": "1",
"sales_person": null,
"project_manager": null,
"client_id": "0",
"organisation_id": "117",
"owner_id": null,
"user_id": "1",
"created_at": "2015-01-28 18:40:58",
"updated_at": "2015-01-28 18:40:58",
"pivot": {
"organisation_id": "117",
"project_id": "134"
},
"clients": null
},
{
"id": "135",
"name": "wewqeqweqw",
"description": null,
"total_cost": "33432.00",
"start_date": "2015-01-14",
"finish_date": "2015-01-31",
"status": "1",
"sales_person": null,
"project_manager": null,
"client_id": "0",
"organisation_id": "117",
"owner_id": null,
"user_id": "1",
"created_at": "2015-01-28 18:43:03",
"updated_at": "2015-01-28 18:43:03",
"pivot": {
"organisation_id": "117",
"project_id": "135"
},
"clients": null
},
{
"id": "136",
"name": "testing save",
"description": null,
"total_cost": "12321.00",
"start_date": "2015-01-06",
"finish_date": "2015-01-23",
"status": "1",
"sales_person": null,
"project_manager": null,
"client_id": "0",
"organisation_id": "117",
"owner_id": null,
"user_id": "1",
"created_at": "2015-01-28 18:46:56",
"updated_at": "2015-01-28 18:46:56",
"pivot": {
"organisation_id": "117",
"project_id": "136"
},
"clients": null
},
{
"id": "137",
"name": "Testing again",
"description": null,
"total_cost": "23131.00",
"start_date": "2015-01-13",
"finish_date": "2015-01-29",
"status": "1",
"sales_person": null,
"project_manager": null,
"client_id": "0",
"organisation_id": "117",
"owner_id": null,
"user_id": "1",
"created_at": "2015-01-28 18:47:28",
"updated_at": "2015-01-28 18:47:28",
"pivot": {
"organisation_id": "117",
"project_id": "137"
},
"clients": null
}
],
"clients": [
{
"id": "67",
"name": "Boom a client!",
"information": "",
"address": null,
"website": null,
"email": null,
"phone": null,
"type": "client",
"add_all": "0",
"created_at": "2015-01-28 17:49:43",
"updated_at": "2015-01-28 17:49:43",
"user_id": "1",
"owner_id": "117",
"projects": [],
"users": []
},
{
"id": "66",
"name": "New client",
"information": "",
"address": null,
"website": null,
"email": null,
"phone": null,
"type": "client",
"add_all": "0",
"created_at": "2015-01-27 12:27:59",
"updated_at": "2015-01-27 12:27:59",
"user_id": "1",
"owner_id": "117",
"projects": [],
"users": []
},
{
"id": "71",
"name": "sadasdasdas",
"information": "",
"address": null,
"website": null,
"email": null,
"phone": null,
"type": "client",
"add_all": "0",
"created_at": "2015-01-28 17:58:57",
"updated_at": "2015-01-28 17:58:57",
"user_id": "1",
"owner_id": "117",
"projects": [],
"users": []
},
{
"id": "68",
"name": "Saving a client",
"information": "",
"address": null,
"website": null,
"email": null,
"phone": null,
"type": "client",
"add_all": "0",
"created_at": "2015-01-28 17:50:31",
"updated_at": "2015-01-28 17:50:31",
"user_id": "1",
"owner_id": "117",
"projects": [],
"users": []
},
{
"id": "72",
"name": "Saving now?",
"information": "",
"address": null,
"website": null,
"email": null,
"phone": null,
"type": "client",
"add_all": "0",
"created_at": "2015-01-28 18:02:47",
"updated_at": "2015-01-28 18:02:47",
"user_id": "1",
"owner_id": "117",
"projects": [],
"users": []
},
{
"id": "70",
"name": "What gets returned and not saved?",
"information": "",
"address": null,
"website": null,
"email": null,
"phone": null,
"type": "client",
"add_all": "0",
"created_at": "2015-01-28 17:57:40",
"updated_at": "2015-01-28 17:57:40",
"user_id": "1",
"owner_id": "117",
"projects": [],
"users": []
},
{
"id": "69",
"name": "What gets returned?",
"information": "",
"address": null,
"website": null,
"email": null,
"phone": null,
"type": "client",
"add_all": "0",
"created_at": "2015-01-28 17:56:09",
"updated_at": "2015-01-28 17:56:09",
"user_id": "1",
"owner_id": "117",
"projects": [],
"users": []
}
],
"users": [
{
"id": "1",
"email": "xxxxxxxxxxxxxx",
"first_name": "xxxxxxxxxxx",
"last_name": "xxxxxxxxxxx",
"display_name": "xxxxxxxxxxxxx",
"initials": "SA",
"remember_me": null,
"active": "1",
"invite_code": null,
"default_organisation": "114",
"forgotten_code": "7bffdaa1b5b238f5ba8b13e46c53dc46",
"login_type": "normal",
"api_token": null,
"created_at": "-0001-11-30 00:00:00",
"updated_at": "2015-01-28 10:48:41",
"deleted_at": null,
"pivot": {
"organisation_id": "117",
"user_id": "1",
"is_admin": "0"
}
},
{
"id": "85",
"email": "richard#xxxxxxxxxx",
"first_name": "xxxxxx",
"last_name": "xxxxxxx",
"display_name": "xxxxxxxxxxx",
"initials": "RB",
"remember_me": null,
"active": "1",
"invite_code": null,
"default_organisation": null,
"forgotten_code": null,
"login_type": "normal",
"api_token": null,
"created_at": "-0001-11-30 00:00:00",
"updated_at": "-0001-11-30 00:00:00",
"deleted_at": null,
"pivot": {
"organisation_id": "117",
"user_id": "85",
"is_admin": "1"
}
}
]
}
I would have thought that some along the lines of this structure would be returned from my backbone model,
attributes: Object
add_all: "0"
clients: s
created_at: "2014-12-16 10:16:03"
group_name: ""
id: "114"
information: ""
members: s
name: "Company Name"
notifications: "0"
projects: s
slug: "company-name"
teams: s
type: "organisation"
updated_at: "2015-01-29 16:04:48"
users: Array[2]
But instead I am getting the following,
What would be causing this? I read somewhere that Backbone does like receiving ID's that are not sequential could that be it? Here is my model code,
'use strict'
App.Models.Client = Backbone.Model.extend({
urlRoot: "http://" + App.API_ROOT + "/clients ",
defaults: {
type:'client'
},
initialize: function() {
var members = this.get('users');
//console.log(members);
var ownerUser = this.get('owner_user');
var ownerOrganisation = this.get('owner_organisation');
var projects = this.get('projects');
this.set('members', new App.Collections.Users(members));
this.set('projects', new App.Collections.Projects(projects));
if(ownerOrganisation == null) {
this.set('owner', new App.Models.User(ownerUser));
} else {
this.set('owner', new App.Models.Organisation(ownerOrganisation));
}
},
});
So a view is created that display a list of "clients" (collection) that belong to "organisation" (model).
The organisation model looks like this,
'use strict'
App.Models.Organisation = Backbone.Model.extend({
urlRoot: "http://" + App.API_ROOT + "/organisations",
defaults: {
group_name: '',
type:'organisation'
},
initialize: function() {
//Gets
var members = this.get('users');
var projects = this.get('projects');
var teams = this.get('teams');
var clients = this.get('clients');
//Sets
if(members != undefined) {
this.set('members', new App.Collections.Users(members));
} else {
this.set('members', new App.Collections.Users);
}
if(projects != undefined) {
this.set('projects', new App.Collections.Projects(projects));
} else {
this.set('projects', new App.Collections.Projects);
}
if(teams != undefined) {
this.set('teams', new App.Collections.Teams(teams));
} else {
this.set('teams', new App.Collections.Teams);
}
if(clients != undefined) {
this.set('clients', new App.Collections.Clients(clients));
} else {
this.set('clients', new App.Collections.Clients);
}
},
});
And the clients collection looks like this,
App.Collections.Clients = Backbone.Collection.extend({
url: 'http://' + App.API_ROOT + '/clients',
model: App.Models.Client,
initialize: function() {
},
search: function( filterValue ) {
var filterThroughValue = function(data) {
filterValue = filterValue.toLowerCase();
return _.some(_.values(data.toJSON()), function(value) {
if(value != undefined) {
value = (!isNaN(value) ? value.toString() : value);
//console.log(value.toLowerCase().indexOf(filterValue));
return value.toLowerCase().indexOf(filterValue) >= 0;
}
});
};
return App.Collections.filterCollection = this.filter(filterThroughValue);
}
});
The data actually comes from the organisation root. And the view does all the work is here,
App.Views.ClientPanel = Backbone.View.extend({
tagName: 'div',
className: 'client-panel clearfix',
template: _.template( $("#tpl-client-panel").html() ),
events: {
"click .stacked-nav a" : "triggerHeight",
"click .js-add-client" : "addNewClient"
},
initialize: function(options) {
this.options = options;
this.model.get('clients').on('add', this.addNewClientList, this);
App.EVENTS.on("clientAdded", function(){ $(".nav-stacked li:last a").trigger('click') }, this);
},
render: function() {
this.$el.html( this.template() );
this.addClients();
App.EVENTS.trigger("listBuilt");
return this;
},
addClients: function() {
if(this.model.get('clients').length > 0) {
this.collection.each( this.addClient, this);
}
},
addClient: function(model) {
var client = new App.Views.SingleClientEntry({
model: model,
is_owner : this.options.is_owner,
currentOrganisation:this.model
});
this.$('.nav-stacked').append( client.render().el );
},
addNewClientList: function(model) {
if(model.get('owner_id') == this.model.get('id')) {
var client = new App.Views.SingleClientEntry({
model: model,
is_owner : this.options.is_owner,
currentOrganisation:this.model
});
this.$('.nav-stacked').append( client.render().el );
}
},
addNewClient: function(e) {
e.preventDefault();
//$(".js-create-group[data-type=client]").trigger('click');
this.clientModal = new App.Views.CreateClientView({
current_organisation: this.model.get('id')
});
this.clientModal.render();
}
});
App.Views.SingleClientEntry = Backbone.View.extend({
tagName: 'li',
className: 'organisation-client',
template: _.template( $("#tpl-client-nav-entry").html() ),
events: {
"click .js-change-client" : "changeClient"
},
initialize: function(options) {
this.options = options;
console.log(this.model);
this.model.on('change', this.render, this);
this.model.on('change', this.showActive, this);
this.model.on('destroy', this.removeView, this);
this.currentOrganisation = options.currentOrganisation;
},
render: function() {
this.$el.html( this.template({
client: this.model.toJSON(),
is_owner: this.options.is_owner
}));
return this;
},
showActive: function() {
this.$('a').addClass('active');
},
changeClient: function(e) {
e.preventDefault();
var element = $(e.currentTarget),
modelID = element.data('id');
$(".nav-stacked a.active").removeClass('active');
element.addClass('active');
var clientData = new App.Views.ClientData({
model: this.currentOrganisation,
modelID : modelID,
is_owner: this.options.is_owner
});
Pops.CurrentClientID = modelID;
$('.client-details').html( clientData.render().el );
$('.tertiary-tabs').find('li:first').find('a').trigger('click');
},
removeView: function() {
this.remove();
}
});
Related
I'm making a fetch to the API to grab the total number of players, the returned data is below:
"data": [
{
"id": 558,
"first_name": "Dave",
"height_feet": null,
"height_inches": null,
"last_name": "Jamerson",
"position": "",
"team": {
"id": 11,
"abbreviation": "HOU",
"city": "Houston",
"conference": "West",
"division": "Southwest",
"full_name": "Houston Rockets",
"name": "Rockets"
},
"weight_pounds": null
},
{
"id": 559,
"first_name": "Scott",
"height_feet": null,
"height_inches": null,
"last_name": "Brooks",
"position": "",
"team": {
"id": 18,
"abbreviation": "MIN",
"city": "Minnesota",
"conference": "West",
"division": "Northwest",
"full_name": "Minnesota Timberwolves",
"name": "Timberwolves"
},
"weight_pounds": null
},
{
"id": 560,
"first_name": "Rolando",
"height_feet": null,
"height_inches": null,
"last_name": "Blackman",
"position": "",
"team": {
"id": 7,
"abbreviation": "DAL",
"city": "Dallas",
"conference": "West",
"division": "Southwest",
"full_name": "Dallas Mavericks",
"name": "Mavericks"
},
"weight_pounds": null
},
{
"id": 561,
"first_name": "Avery",
"height_feet": null,
"height_inches": null,
"last_name": "Johnson",
"position": "",
"team": {
"id": 8,
"abbreviation": "DEN",
"city": "Denver",
"conference": "West",
"division": "Northwest",
"full_name": "Denver Nuggets",
"name": "Nuggets"
},
"weight_pounds": null
},
{
"id": 562,
"first_name": "Rod",
"height_feet": null,
"height_inches": null,
"last_name": "Higgins",
"position": "",
"team": {
"id": 10,
"abbreviation": "GSW",
"city": "Golden State",
"conference": "West",
"division": "Pacific",
"full_name": "Golden State Warriors",
"name": "Warriors"
},
"weight_pounds": null
},
{
"id": 566,
"first_name": "Sam",
"height_feet": null,
"height_inches": null,
"last_name": "Vincent",
"position": "",
"team": {
"id": 22,
"abbreviation": "ORL",
"city": "Orlando",
"conference": "East",
"division": "Southeast",
"full_name": "Orlando Magic",
"name": "Magic"
},
"weight_pounds": null
},
{
"id": 567,
"first_name": "Isiah",
"height_feet": null,
"height_inches": null,
"last_name": "Thomas",
"position": "",
"team": {
"id": 9,
"abbreviation": "DET",
"city": "Detroit",
"conference": "East",
"division": "Central",
"full_name": "Detroit Pistons",
"name": "Pistons"
},
"weight_pounds": null
}
],
"meta": {
"total_pages": 39,
"current_page": 1,
"next_page": 2,
"per_page": 100,
"total_count": 3828
}
Problem is, the API only allows for a max of 100 results. As you can see in the "meta" object at the bottom, there is a total_count of 3828 and 39 pages, how would I access the other pages and get all 3828 results? currently I only get the first page with 100 results when I fetch.
const getPlayers = () => {
fetch(`https://www.balldontlie.io/api/v1/players?per_page=100`)
.then(res => res.json())
.then(data => dispatch(playerActions.getPlayers(data)));
}
I have the following JSON
{
"error": false,
"data": {
"id": 1,
"name": "Jagadesha NH",
"email": "example#gmail.com",
"phone": "9986XXXXXX",
"dob": "1991-06-01",
"gender": "m",
"active": 1,
"created_at": "2017-02-19 21:33:04",
"updated_at": "2017-02-19 21:33:04",
"profile": {
"id": 1,
"user_id": 1,
"picture": "https:\/\/placehold.it\/150x150",
"about": null,
"occupation": null,
"created_at": "2017-02-19 21:33:04",
"updated_at": "2017-02-19 21:33:04"
}
},
"msg": ""
}
every time I try to read picture property I get an error saying
cannot read property picture of undefined
I am reading like
data.profile.picture
i found it like this :
var x={
"error": false,
"data": {
"id": 1,
"name": "Jagadesha NH",
"email": "example#gmail.com",
"phone": "9986xxxxxx",
"dob": "1904-06-01",
"gender": "m",
"active": 1,
"created_at": "2017-02-19 21:33:04",
"updated_at": "2017-02-19 21:33:04",
"profile": {
"id": 1,
"user_id": 1,
"picture": "https:\/\/placehold.it\/150x150",
"about": null,
"occupation": null,
"created_at": "2017-02-19 21:33:04",
"updated_at": "2017-02-19 21:33:04"
}
},
"msg": ""
}
;
alert(x.data.profile.picture);
if you store json in a variable access it with variable and then using dot(<<variable_name>>.data.profile.picture)
you are getting error because data is itself a key or property of object
var a = //Your json
a.data.profile.picture
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have function in my code that is presented below. So, while working I see a beautiful error...
Uncaught TypeError: Cannot read property 'length' of undefined
There is my code:
.on('slider', function (data) {
if(ngtimerStatus) {
ngtimerStatus = false;
$('.forceClose').addClass('msgs-not-visible');
console.log(data);
var users = data.users;
console.log(users);
users = mulAndShuffle(users, Math.ceil(110 / users.length));
users[6] = data.winner;
users[100] = data.winner;
html = '';
...
All in all I found that $data is nit empty!
It includes
{
"chance": 98.6,
"users": [
{
"updated_at": "2015-11-24 22:25:59",
"created_at": "2015-11-24 14:56:20",
"remember_token": "xespxJgYoYR9Pe1WQOYjMa3xuN4JYG708XJ20qhMJbMNfA2B1a5yMM8p5jnm",
"is_moderator": "0",
"is_admin": "0",
"votes": "0",
"id": "1",
"username": "dota2expert.ru",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/a8/a80a9f13fdbfcf02053b73f55a4a0e8596221137_full.jpg",
"steamid": "STEAM_0:1:-24976791",
"steamid64": "76561198031473286",
"trade_link": "https://steamcommunity.com/tradeoffer/new/?partner=71207558&token=LbivBnv-",
"accessToken": "LbivBnv-",
"money": "0.00"
},
{
"updated_at": "2015-11-24 22:28:27",
"created_at": "2015-11-24 22:26:27",
"remember_token": "ZPcNSqC3nGsiuLdWTKp3IzVuqhwmj1RUYADTIOIxCGLqjfSa6V8U14qTIhs4",
"is_moderator": "0",
"is_admin": "0",
"votes": "0",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"trade_link": "",
"accessToken": "",
"money": "275.00"
}
],
"tickets": "478986",
"ticket": 173512,
"round_number": "0.362248050305609551",
"winner": {
"updated_at": "2015-11-24 22:42:37",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": 4370,
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"game": {
"winner": {
"updated_at": "2015-11-24 22:42:37",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": 4370,
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"bets": [
{
"user": {
"updated_at": "2015-11-24 22:25:59",
"id": "1",
"username": "dota2expert.ru",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/a8/a80a9f13fdbfcf02053b73f55a4a0e8596221137_full.jpg",
"steamid": "STEAM_0:1:-24976791",
"steamid64": "76561198031473286",
"money": "0.00",
"votes": "0",
"created_at": "2015-11-24 14:56:20"
},
"updated_at": "2015-11-24 21:43:38",
"created_at": "2015-11-24 21:43:38",
"id": "5",
"user_id": "1",
"game_id": "2",
"items": "[{\"name\":\"Inscribed Crescent Bow\",\"market_hash_name\":\"Inscribed Crescent Bow\",\"classid\":\"503011467\",\"rarity\":\"mythical\",\"price\":\"62.85\"}]",
"itemsCount": "1",
"price": "62.85",
"from": "0",
"to": "6284"
},
{
"user": {
"updated_at": "2015-11-24 22:25:59",
"id": "1",
"username": "dota2expert.ru",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/a8/a80a9f13fdbfcf02053b73f55a4a0e8596221137_full.jpg",
"steamid": "STEAM_0:1:-24976791",
"steamid64": "76561198031473286",
"money": "0.00",
"votes": "0",
"created_at": "2015-11-24 14:56:20"
},
"updated_at": "2015-11-24 21:50:23",
"created_at": "2015-11-24 21:50:23",
"id": "6",
"user_id": "1",
"game_id": "2",
"items": "[{\"name\":\"Talon of the Scarlet Raven\",\"market_hash_name\":\"Talon of the Scarlet Raven\",\"classid\":\"217224920\",\"rarity\":\"uncommon\",\"price\":\"2.02\"}]",
"itemsCount": "1",
"price": "2.02",
"from": "6285",
"to": "6486"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:18",
"created_at": "2015-11-24 22:28:18",
"id": "7",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "6487",
"to": "37986"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:19",
"created_at": "2015-11-24 22:28:19",
"id": "8",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "37987",
"to": "69486"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:21",
"created_at": "2015-11-24 22:28:21",
"id": "9",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "69487",
"to": "100986"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:25",
"created_at": "2015-11-24 22:28:25",
"id": "10",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"4\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 3150 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_4.png\",\"price\":\"3150.00\"}]",
"itemsCount": "1",
"price": "3150.00",
"from": "100987",
"to": "415986"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:26",
"created_at": "2015-11-24 22:28:26",
"id": "11",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "415987",
"to": "447486"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:27",
"created_at": "2015-11-24 22:28:27",
"id": "12",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "447487",
"to": "478986"
}
],
"updated_at": "2015-11-24 22:42:37",
"created_at": "2015-11-24 21:18:41",
"rand_number": "0.362248050305609551",
"status_prize": "0",
"id": "2",
"winner_id": "7",
"status": 3,
"items": "8",
"price": "4789.87",
"started_at": "2015-11-24 22:28:27",
"finished_at": {
"timezone": "Europe/Moscow",
"timezone_type": 3,
"date": "2015-11-24 22:42:37"
},
"won_items": "\n [{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"},\n {\"id\":\"4\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 3150 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_4.png\",\"price\":\"3150.00\"},{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"},{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]"
}
}
where you can simply found part named "users" but data.users is empty! (underfined). Can you help me with it?
You might need to use data = JSON.parse(data);, before accessing data.users? It's hard to tell from your example.
I have a HTML code like below which I use AngularJS framework within it:
<select name="choose-staff" ng-model="admin_times[0].user" ng-change="update(reserve.staff)" id="choose-staff">
<option ng-repeat="value in staff | unique:'employee.user.username'" value="{[{ value.employee.user.username }]}">{[{ value.employee.user.first_name }]} {[{ value.employee.user.last_name }]}</option>
</select>
And I get an error like this:
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: value in staff | unique:'employee.user.username', Duplicate key: string:ب, Duplicate value: ب
And if I use track by $index it destroys my desired structure and when I click one of options, the rest of them get vanished.
[
{
"employee": {
"user": {
"id": 3,
"first_name": "اشکان",
"last_name": "وکیلی",
"user_profile": null,
"username": "ashkan"
},
"business": {
"id": "caf241cd-adb4-44ee-8c40-0f6cdb3bc5ac",
"fa_name": "ساینا",
"en_name": "Saina",
"service": [],
"persian_address": "",
"location": "35.77885523664743,51.39051060551765",
"avatar": null,
"email": ""
},
"is_head": true
},
"service": {
"en_title": "Haircut",
"fa_title": "کوتاهی مو"
},
"allocated_time": 60,
"booked_no": "XG4OCX81"
},
{
"employee": {
"user": {
"id": 3,
"first_name": "اشکان",
"last_name": "وکیلی",
"user_profile": null,
"username": "ashkan"
},
"business": {
"id": "caf241cd-adb4-44ee-8c40-0f6cdb3bc5ac",
"fa_name": "ساینا",
"en_name": "Saina",
"service": [],
"persian_address": "",
"location": "35.77885523664743,51.39051060551765",
"avatar": null,
"email": ""
},
"is_head": true
},
"service": {
"en_title": "Color",
"fa_title": "رنگ مو"
},
"allocated_time": 25,
"booked_no": "1AY3F24G"
},
{
"employee": {
"user": {
"id": 2,
"first_name": "رضا",
"last_name": "ولیمرادی",
"user_profile": {
"id": "9d9be03a-f840-46ea-a21e-76cd5775a886",
"avatar": null,
"city": "",
"gender": "F",
"birthday": null,
"country": "IR",
"about": "",
"timestamp": "2015-11-06T14:56:10.312340Z",
"location": "36.03133177633187,51.328125"
},
"username": "reza"
},
"business": {
"id": "caf241cd-adb4-44ee-8c40-0f6cdb3bc5ac",
"fa_name": "ساینا",
"en_name": "Saina",
"service": [],
"persian_address": "",
"location": "35.77885523664743,51.39051060551765",
"avatar": null,
"email": ""
},
"is_head": false
},
"service": {
"en_title": "Yellow",
"fa_title": "زرد"
},
"allocated_time": 15,
"booked_no": "H989M93X"
},
{
"employee": {
"user": {
"id": 1,
"first_name": "علیرضا",
"last_name": "غفاری",
"user_profile": {
"id": "884b36e3-7bad-466f-afee-25801572b834",
"avatar": null,
"city": "",
"gender": "F",
"birthday": null,
"country": "IR",
"about": "",
"timestamp": "2015-11-06T14:56:39.522362Z",
"location": "32.24997445586331,53.26171875"
},
"username": "alireza"
},
"business": {
"id": "caf241cd-adb4-44ee-8c40-0f6cdb3bc5ac",
"fa_name": "ساینا",
"en_name": "Saina",
"service": [],
"persian_address": "",
"location": "35.77885523664743,51.39051060551765",
"avatar": null,
"email": ""
},
"is_head": true
},
"service": {
"en_title": "Color",
"fa_title": "رنگ مو"
},
"allocated_time": 20,
"booked_no": "O5KLFPZB"
}
]
I don't like the redundancy of employee.user.username
Looks to me like the unique value in each object is the booked_no.
In which case you should use track by value.booked_no
On the handlebars website I can see how to loop through an array but I'm trying to look through an array object and having no luck.
Here's my data, which I am getting back using jquery and a jsonp command.
[
{
"id": 95,
"user_id": 6,
"status": 1,
"name": "Lost & Co",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "London",
"venue": "Lost & Co",
"fsqid": "512fb191e4b0f660fda426eb",
"address": "160 Putney High Street",
"postcode": null,
"lat": "51.461322924772",
"lng": "-0.21689196269354",
"phone": "+442087802235",
"description": null,
"date": "2014-05-10",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 12:20:09",
"updated_at": "2014-04-24 12:20:09"
},
{
"id": 96,
"user_id": 6,
"status": 1,
"name": "Lost & Co",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "London",
"venue": "Lost & Co",
"fsqid": "512fb191e4b0f660fda426eb",
"address": "160 Putney High Street",
"postcode": null,
"lat": "51.461322924772",
"lng": "-0.21689196269354",
"phone": "+442087802235",
"description": null,
"date": "2014-05-24",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 12:20:57",
"updated_at": "2014-04-24 12:20:57"
},
{
"id": 94,
"user_id": 6,
"status": 1,
"name": "Lost Society",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "London",
"venue": "Lost Society",
"fsqid": "4bbcf543593fef3b35de0256",
"address": "697 Wandsworth Rd",
"postcode": "SW8 3JF",
"lat": "51.467991033249",
"lng": "-0.14425992965698",
"phone": "+442076526526",
"description": null,
"date": "2014-05-31",
"time": "",
"image": null,
"image_thumb": null,
"website": "http://www.lostsociety.co.uk/index2.html",
"twitter": "lostsocietybar",
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 12:18:53",
"updated_at": "2014-04-24 12:18:53"
},
{
"id": 97,
"user_id": 6,
"status": 1,
"name": "Campus North",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "Newcastle",
"venue": "Campus North",
"fsqid": "533b05b0498ea89103652747",
"address": "5 Carliol Square",
"postcode": null,
"lat": "54.973037719727",
"lng": "-1.6087431907654",
"phone": null,
"description": null,
"date": "2014-06-12",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 17:56:26",
"updated_at": "2014-04-24 17:55:55"
},
{
"id": 91,
"user_id": 6,
"status": 1,
"name": "Glastonbury",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "Pilton",
"venue": "Glastonbury",
"fsqid": null,
"address": null,
"postcode": null,
"lat": null,
"lng": null,
"phone": null,
"description": null,
"date": "2014-06-28",
"time": "",
"image": null,
"image_thumb": null,
"website": "http://www.glastonburyfestivals.co.uk/",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-22 12:08:32",
"updated_at": "2014-04-22 13:06:51"
},
{
"id": 92,
"user_id": 6,
"status": 1,
"name": "Glastonbury",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "Pilton",
"venue": "Glastonbury",
"fsqid": null,
"address": null,
"postcode": null,
"lat": null,
"lng": null,
"phone": null,
"description": null,
"date": "2014-06-29",
"time": "",
"image": null,
"image_thumb": null,
"website": "http://www.glastonburyfestivals.co.uk/",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-22 12:08:46",
"updated_at": "2014-04-22 13:07:27"
},
{
"id": 80,
"user_id": 6,
"status": 1,
"name": "TBA",
"country": {
"code": "ES",
"name": "Spain"
},
"city": "Ibiza",
"venue": "TBA",
"fsqid": "51fab9b1498e0ced82ae61d0",
"address": "Mediterranean Sea",
"postcode": null,
"lat": "38.970107",
"lng": "1.305714",
"phone": null,
"description": null,
"date": "2014-09-12",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-02-27 00:41:49",
"updated_at": "2014-02-27 00:41:49"
}
]
I was trying this but it's not working. Have I missed something obvious?
<ul>
{{#each}}
<li>
<h3>{{ venue }}</h3>
</li>
{{/each}}
</ul>
You need to provide a context to that #each:
{{#each .}}
<li>
<h3>{{ venue }}</h3>
</li>
{{/each}}
All you're missing is that you need to let handlebars know that it's the root object as such that you want to iterate over.