Related
I have this json object:
[
{
"id": "imrhf5owlv9j4jj0",
"_status": "created",
"_changed": "",
"description": null,
"customer_name": "HUGO",
"aparent_potencial": "",
"real_potencial": "",
"type": "expense",
"value": 0,
"date_at": 1664147419693,
"category_id": "",
"cont\r\nact_id": "",
"created_at": 1664147419687,
"updated_at": 1664147419687
},
{
"id": "san36ma2i3rs7quv",
"_status": "created",
"_changed": "",
"description": null,
"customer_name": "So queria ser eu mesmo",
"aparent_potencial": "",
"real_potencial": "",
"type": "customer",
"val\r\nue": 0,
"date_at": 1664147602340,
"category_id": "",
"contact_id": "",
"created_at": 1664147602334,
"updated_at": 1664147602334
},
{
"id": "qgscc5qe0hdtwhqh",
"_status": "created",
"_changed": "",
"description": null,
"customer_name": "SW",
"aparent_potencial": "",
"real_potencial": "",
"type": "expense",
"value": 0,
"date_at": 1664150619834,
"category_id": "",
"contact_id": "",
"created_at": 1664150619831,
"updated_at": 1664150619831
}
]
What I want to do is to add a new array attribute inside each of the json, so, for example:
[
{
"id": "imrhf5owlv9j4jj0",
"_status": "created",
"_changed": "",
"description": null,
"customer_name": "HUGO",
"aparent_potencial": "",
"real_potencial": "",
"type": "expense",
"value": 0,
"date_at": 1664147419693,
"category_id": "",
"cont\r\nact_id": "",
"created_at": 1664147419687,
"updated_at": 1664147419687
},
{
"id": "san36ma2i3rs7quv",
"_status": "created",
"_changed": "",
"description": null,
"customer_name": "So queria ser eu mesmo",
"aparent_potencial": "",
"real_potencial": "",
"type": "customer",
"val\r\nue": 0,
"date_at": 1664147602340,
"category_id": "",
"contact_id": "",
"created_at": 1664147602334,
"updated_at": 1664147602334
},
{
"id": "qgscc5qe0hdtwhqh",
"_status": "created",
"_changed": "",
"description": null,
"customer_name": "SW",
"aparent_potencial": "",
"real_potencial": "",
"type": "expense",
"value": 0,
"date_at": 1664150619834,
"category_id": "",
"contact_id": "",
"created_at": 1664150619831,
"updated_at": 1664150619831
},
],
"contact": [
"customer_name": "SW",
"aparent_potencial": "",
"real_potencial": "",
"type": "expense",
"value": 0,
"date_at": 1664150619834,
"category_id": "",
"contact_id": "",
"created_at": 1664150619831,
"updated_at": 1664150619831
]
I was trying to use push, but no solution yet, as below:
changes.customer.created.push({contact: changes.contact.created})
but it created a string inside the object:
[{"id":"imrhf5owlv9j4jj0","_status":"created","_changed":"","description":null,"customer_name":"HUGO","aparent_potencial":"","real_potencial":"","type":"expense","value":0,"date_at":1664147419693,"category_id":"","cont
act_id":"","created_at":1664147419687,"updated_at":1664147419687},{"id":"san36ma2i3rs7quv","_status":"created","_changed":"","description":null,"customer_name":"So queria ser eu mesmo","aparent_potencial":"","real_potencial":"","type":"customer","val
ue":0,"date_at":1664147602340,"category_id":"","contact_id":"","created_at":1664147602334,"updated_at":1664147602334},{"id":"qgscc5qe0hdtwhqh","_status":"created","_changed":"","description":null,"customer_name":"SW","aparent_potencial":"","real_potencial":"","type":"expense","value":0,"date_at":1664150619834,"category_id":"","contact_id":"","created_at":1664150619831,"updated_at":1664150619831},"contact:[object Object],[object Object],[object Object]"]
Also, is there a way to remove this type of char that gets into the json?
cont\r\nact_id
Thanks so much!
json array cannot contains string key.
you can use like this
let json = {}
json.contact = { "customer_name": "SW" }
json.array = [ {"id":1,},{"id":2,}]
Javascript's push function only works when you're pushing values to an array. It won't work if you try to push to an object, instead it will try to call the key of "push" which doesn't exist. That's why you're getting the error you're getting.
Make sure that $scope.item is an array ([] or new Array), and then push to it with the value you would like.
$scope.item = [];
$scope.push = function () {
$scope.item.push({"contact":[]});
};
You have to put it in a different file to achieve those example format. And your contacts array value is not the correct type. Array does not contain string key. Either Object{"customer_name": "SW"} or string "'customer_name': 'SW'".
And your json file content need to be inside {} or []. But your example format is not the correct format for json.
The Question;
I want to filter by properties.
I have json data coming from the api and I want to filter that data.(If there is a way to do with laravel I would like to try that too)
Json Data;
[
{
"id": 1,
"title": "Deneme Batarya",
"description": "<p>Deneme Batarya</p>",
"slug": "deneme-batarya",
"brand_id": 4,
"deleted_at": null,
"created_at": "2021-02-22 19:43:02",
"updated_at": "2021-02-22 19:43:02",
"categories": [
{
"id": 3,
"parent_id": null,
"title": "Giyilebilir Teknoloji",
"description": null,
"slug": "giyilebilir-teknoloji",
"media": "public/media/slider/ms-10.jpg",
"level": 0,
"deleted_at": null,
"created_at": null,
"updated_at": null,
"pivot": {
"product_id": 1,
"category_id": 3
}
},
{
"id": 26,
"parent_id": 3,
"title": "Akıllı Bileklik",
"description": null,
"slug": "akilli-bileklik",
"media": "public/media/slider/ms-10.jpg",
"level": 2,
"deleted_at": null,
"created_at": null,
"updated_at": null,
"pivot": {
"product_id": 1,
"category_id": 26
}
}
],
"images": [
{
"id": 3,
"product_id": 1,
"product_detail_id": 1,
"sku": "model-45b",
"image": "public/media/product/1-model-45b864.png",
"level": 1,
"deleted_at": null,
"created_at": "2021-02-24 19:49:16",
"updated_at": "2021-02-24 19:49:16"
},
{
"id": 4,
"product_id": 1,
"product_detail_id": null,
"sku": null,
"image": "public/media/product/1--501.jpeg",
"level": 1,
"deleted_at": null,
"created_at": "2021-02-24 19:53:27",
"updated_at": "2021-02-24 19:53:27"
}
],
"details": [
{
"id": 1,
"product_id": 1,
"qty": 5,
"status": "Available",
"price": "56.00",
"discount": 5,
"sku": "model-45b",
"start": "2021-02-22 00:00:00",
"end": "2021-02-23 00:00:00",
"deleted_at": null,
"created_at": "2021-02-22 19:43:27",
"updated_at": "2021-02-22 19:43:27"
},
{
"id": 2,
"product_id": 1,
"qty": 6,
"status": "Available",
"price": "90.00",
"discount": 4,
"sku": "model-45a",
"start": "2021-02-25 00:00:00",
"end": "2021-02-26 00:00:00",
"deleted_at": null,
"created_at": "2021-02-24 19:26:48",
"updated_at": "2021-02-24 19:26:48"
}
],
"properties": [
{
"id": 1,
"product_id": 1,
"product_detail_id": 1,
"property_id": 7,
"parent_id": 1,
"created_at": "2021-02-22 19:43:27",
"updated_at": "2021-02-22 19:43:27",
"property": {
"id": 7,
"parent_id": 1,
"title": "Green",
"slug": "green",
"value": "#008000",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 1,
"parent_id": null,
"title": "Color",
"slug": "color",
"value": null,
"created_at": null,
"updated_at": null
}
},
{
"id": 2,
"product_id": 1,
"product_detail_id": 1,
"property_id": 20,
"parent_id": 3,
"created_at": "2021-02-22 19:43:27",
"updated_at": "2021-02-22 19:43:27",
"property": {
"id": 20,
"parent_id": 3,
"title": "1 TB",
"slug": "1-tb",
"value": "1 TB",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 3,
"parent_id": null,
"title": "Store Capacity",
"slug": "store-capacity",
"value": null,
"created_at": null,
"updated_at": null
}
},
{
"id": 3,
"product_id": 1,
"product_detail_id": 2,
"property_id": 7,
"parent_id": 1,
"created_at": "2021-02-24 19:26:48",
"updated_at": "2021-02-24 19:26:48",
"property": {
"id": 7,
"parent_id": 1,
"title": "Green",
"slug": "green",
"value": "#008000",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 1,
"parent_id": null,
"title": "Color",
"slug": "color",
"value": null,
"created_at": null,
"updated_at": null
}
},
{
"id": 4,
"product_id": 1,
"product_detail_id": 2,
"property_id": 12,
"parent_id": 2,
"created_at": "2021-02-24 19:26:48",
"updated_at": "2021-02-24 19:26:48",
"property": {
"id": 12,
"parent_id": 2,
"title": "L",
"slug": "l",
"value": "Large",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 2,
"parent_id": null,
"title": "Size",
"slug": "size",
"value": null,
"created_at": null,
"updated_at": null
}
},
{
"id": 5,
"product_id": 1,
"product_detail_id": 2,
"property_id": 17,
"parent_id": 3,
"created_at": "2021-02-24 19:26:48",
"updated_at": "2021-02-24 19:26:48",
"property": {
"id": 17,
"parent_id": 3,
"title": "64 GB",
"slug": "64-gb",
"value": "64 GB",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 3,
"parent_id": null,
"title": "Store Capacity",
"slug": "store-capacity",
"value": null,
"created_at": null,
"updated_at": null
}
}
]
}
]
I don't know the properties that user added because it is dynamic. So I'm reaching the properties like this.
function makeQueryString() {
function keyValues(idPref) {
var key = idPref,
values = $('#' + idPref + ' input[id^="' + idPref + '"]').map(function() {
if (this.value !== this.defaultValue || this.checked !== this.defaultChecked) {
return this.value;
}
}).get().join(',');
return key && values.length ? key + '=' + values : '';
}
return $('form#property-filter span[id]').map(function(){
let keyValue = keyValues(this.id);
if (keyValue != ''){
return keyValue;
}
}).get().join('&');
}
Properties Result;
id of properties with name
color=6,7&store-capacity=15,16,17&ram=21,22,23
EDIT
The main problem is make a filter using property result.
For example when user select Red And Blue color and click filter button it will return color=6,7 and I should filter my json data with this and bring only if include color 6 or 7. At the same time if user select red, 64GB, 128GB then it should return only if red color with 64 or 128.
I tried so far;
function filterProducts(prop) {
// prop = color=6,7&store-capacity=15,16,17&ram=21,22
prop = prop.split('&');
let x = [];
for (i=0; i<prop.length; i++){
x.push(prop[i].split('='));
}
let newProductsArr = [];
for (p=0; p<products.length; p++) {
for (k=0; k< products[p].properties.length; k++){
for (i=0; i<x.length; i++){
if(x[i][0] === products[p].properties[k].parent.slug){
let ids = x[i][1].split(',');
for (g=0; g<ids.length; i++){
if (products[p].properties[k].property_id === ids[g]){
newProductsArr.push(products[p])
}
}
}
}
}
}
}
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
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();
}
});
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.