Aim: On click of a next/previous button the label changes to the next/previous category of that current slide. Category Slider Wireframe of what I want to achieve.
Background: I previously attempted this 'Obtain Next/Previous Value from Object'. However I had issues where I had to have this in my ng-repeat and even though the data I wanted was produced it did not function with the bxSlider plugin (I could not duplicate the arrows). Therefore I need to maintain these arrows and labels outside of my ng-repeat.
Next Solution: I realised potentially the best solution for this would be to keep this outside the ng-repeat. In order to do so I believe I would have to variable attached to the scope that will increment/decrement. So the appropriate Next/Previous buttons can be viewed.
I naively attempted ng-click="activeCat = activeCat + 1" however that obviously just added ones to the end of the category.
Any help is greatly appreciated :)
HTML
<!-- Next & Previous Buttons -->
<div class="btn-nextprev">
<div class="next-container">
<a href="" class="btn btn-next" id="next" ng-click="nextCat = nextCat + 1">
{{ employees[getNextCategoryIndex($index)].category }} {{nextCat}}
</a>
</div>
<div class="prev-container">
<a href="" class="btn btn-prev" id="prev">
{{ employees[getPrevCategoryIndex($index)].category }} {{prevCat}}
</a>
</div>
</div>
<!-- END Next & Previous Buttons -->
Controller:
var personControllers = angular.module('personControllers', ['ngAnimate']);
//PersonSearch Controller
personControllers.controller('PersonList', ['$scope', '$http',
function($scope, $http) {
$http.get('../static/scripts/data2.json').
success(function(data) {
console.log("JSON file loaded");
console.log(data);
$scope.employees = data;
$scope.activeCat = data[0].category;
$scope.nextCat = data[0 + 1].category;
//$scope.prevCat = data[0 - 1].category;
}).
error(function(){
console.log("JSON file NOT loaded");
});
}]);
JSON:
[
{
"category": "Technology",
"shortname": "tech",
"icon": "fa-desktop",
"cat_id": 0,
"cards": [
{
"id": "card-1",
"name": "George Sofroniou",
"shortname": "G_Sof",
"age": "23",
"company": "Pirean Ltd.",
"role": "Graduate UI Developer"
},
{
"id": "card-2",
"name": "Steve Jobs",
"shortname": "S_Jobs",
"age": "56 (Died)",
"company": "Apple Inc.",
"role": "Former CEO"
},
]
},
{
"category": "Motors",
"shortname": "mot",
"icon": "fa-car",
"cat_id": 1,
"cards": [
{
"id": "card-1",
"name": "Elon Musk",
"shortname": "E_Musk",
"age": "43",
"company": "Tesla Motors",
"role": "CEO"
},
{
"id": "card-2",
"name": "Henry Ford",
"shortname": "H_Ford",
"age": "83 (Died)",
"company": "Ford Motor Company",
"role": "Founder"
}
]
},
{
"category": "Football",
"shortname": "foot",
"icon": "fa-futbol-o",
"cat_id": 2,
"cards": [
{
"id": "card-1",
"name": "Sir Alex Ferguson",
"shortname": "A_Fer",
"age": "73",
"company": "N/A",
"role": "Retired"
},
{
"id": "card-2",
"name": "Bobby Moore",
"shortname": "B_Moor",
"age": "51 (Died)",
"company": "N/A",
"role": "Footballer"
}
]
},
{
"category": "Law",
"shortname": "law",
"icon": "fa-gavel",
"cat_id": 3,
"cards": [
{
"id": "card-1",
"name": "Harvey Specter",
"shortname": "H_Spec",
"age": "43",
"company": "Pearson Specter Litt",
"role": "Name Partner"
},
{
"id": "card-2",
"name": "Saul Goodman (James Morgan McGill)",
"shortname": "S_Good",
"age": "48",
"company": "Better Call Saul",
"role": "Criminal Defence Attorney"
}
]
}
]
You could just store each objects data in an array, and have the array index increment or decrement depending on which button they press.
var i = 0
$scope.dataArray = [];
//sift the data into the array
$scope.next = function () {
i++
};
$scope.prev = function () {
i--
};
Here is an example:
http://plnkr.co/edit/SVXhxvwJqnO8Uarjkxx2?p=preview
GSof Edit:
//Next & Previous Button Category Label
$scope.i = 0;
$scope.j = $scope.employees.length;
$scope.nextCat = $scope.i + 1;
$scope.prevCat = $scope.j - 1;
$scope.getNext = function(){
//console.log($scope.nextCat);
$scope.nextCat++;
if( $scope.nextCat >= $scope.employees.length ){
$scope.nextCat = 0;
}
$scope.prevCat++;
if( $scope.prevCat >= $scope.employees.length ){
$scope.prevCat = 0;
}
};
$scope.getPrev = function(){
//console.log($scope.nextCat);
$scope.prevCat--;
if( $scope.prevCat < 0 ){
$scope.prevCat = $scope.employees.length - 1;
}
$scope.nextCat--;
if( $scope.nextCat < 0 ){
$scope.nextCat = $scope.employees.length - 1;
}
};
This if statement will insure that when the end of the array is reached the item will return to the beginning. The next and previous values are now in sync with each other so on press of the next button both the next and previous labels update and vice versa.
Again thank you for help.
On ng-click call function and in that function do the increment.
Like this
<a href="" class="btn btn-next" id="next" ng-click="increment()">
and in controllerjs
$scope.increment=function(){
$scope.flag=false;
angular.forEach($scope.employees,function(employe){
if(flag){
$scope.nextCat = employe.category;
return;
}
if($scope.nextCat === employe.category){
flag=true;
}
});
}
Related
I am not sure how to form this question, but I will do my best.
I don't know how to remove object by _id from 'list:' part.
So, I have one array, and inside of that array I have list of objects,inside of these objects I have again array with objects, so I want to remove one object from that last array, how I can do that?
Cannot fix it for 2 days, I'm stucked!
Thanks!
[
{
"_id": "599a1344bf50847b0972a465",
"title": "British Virgin Islands BC",
"list": [],
"price": "1350"
},
{
"_id": "599a1322bf50847b0972a38e",
"title": "USA (Nevada) LLC",
"list": [
{
"_id": "599a1322bf50847b0972a384",
"title": "Nominee Member",
"service": "nominee-service",
"price": "300"
},
{
"_id": "599a1322bf50847b0972a385",
"title": "Nominee Manager & General Power of Attorney (Apostilled)",
"service": "nominee-service",
"price": "650"
},
{
"_id": "599a1322bf50847b0972a386",
"title": "Special Power of Attorney",
"service": "nominee-service",
"price": "290"
}
],
"price": "789"
},
{
"_id": "599a12fdbf50847b0972a2ad",
"title": "Cyprus LTD",
"list": [
{
"_id": "599a12fdbf50847b0972a2a5",
"title": "Nominee Shareholder",
"service": "nominee-service",
"price": "370"
},
{
"_id": "599a12fdbf50847b0972a2a6",
"title": "Nominee Director & General Power or Attorney (Apostilled)",
"service": "nominee-service",
"price": "720"
},
{
"_id": "599a12fdbf50847b0972a2ab",
"title": "Extra Rubber Stamp",
"service": "other-service",
"price": "40"
}
],
"price": "1290"
}
]
Using Vanilla JS:
function findAndRemove(data, id) {
data.forEach(function(obj) { // Loop through each object in outer array
obj.list = obj.list.filter(function(o) { // Filter out the object with unwanted id, in inner array
return o._id != id;
});
});
}
var data = [{
"_id": "599a1344bf50847b0972a465",
"title": "British Virgin Islands BC",
"list": [],
"price": "1350"
},
{
"_id": "599a1322bf50847b0972a38e",
"title": "USA (Nevada) LLC",
"list": [{
"_id": "599a1322bf50847b0972a384",
"title": "Nominee Member",
"service": "nominee-service",
"price": "300"
},
{
"_id": "599a1322bf50847b0972a385",
"title": "Nominee Manager & General Power of Attorney (Apostilled)",
"service": "nominee-service",
"price": "650"
},
{
"_id": "599a1322bf50847b0972a386",
"title": "Special Power of Attorney",
"service": "nominee-service",
"price": "290"
}
],
"price": "789"
},
{
"_id": "599a12fdbf50847b0972a2ad",
"title": "Cyprus LTD",
"list": [{
"_id": "599a12fdbf50847b0972a2a5",
"title": "Nominee Shareholder",
"service": "nominee-service",
"price": "370"
},
{
"_id": "599a12fdbf50847b0972a2a6",
"title": "Nominee Director & General Power or Attorney (Apostilled)",
"service": "nominee-service",
"price": "720"
},
{
"_id": "599a12fdbf50847b0972a2ab",
"title": "Extra Rubber Stamp",
"service": "other-service",
"price": "40"
}
],
"price": "1290"
}
];
// Empty almost all of list, except middle one
findAndRemove(data, "599a1322bf50847b0972a384");
findAndRemove(data, "599a1322bf50847b0972a386");
findAndRemove(data, "599a12fdbf50847b0972a2a5");
findAndRemove(data, "599a12fdbf50847b0972a2a6");
findAndRemove(data, "599a12fdbf50847b0972a2ab");
console.log(data);
Cleared everything except middle list, just for better visualization.
#Abhijit Kar your one is working perfectly, thanks mate!
How I can later splice this list?
When I was working with objects from first array, I did it like this :
var inventory = jsonArrayList;
for (var i = 0; i < inventory.length; i++) {
if (inventory[i]._id == deleteProductById) {
vm.items.splice(i, 1);
break;
}
}
It would be very helpful, thanks alot!
You can use Array.map and Array.filter to accomplish this. Detailed explanation in comments:
PS: This snippet uses ES6 arrow functions and spread operator
function removeById(arr, id) {
// Array.map iterates over each item in the array,
// and executes the given function on the item.
// It returns an array of all the items returned by the function.
return arr.map(obj => {
// Return the same object, if the list is empty / null / undefined
if (!obj.list || !obj.list.length) return obj;
// Get a new list, skipping the item with the spedified id
const newList = obj.list.filter(val => val._id !== id);
// map function returns the new object with the filtered list
return { ...obj, list: newList };
});
}
const oldArray = <YOUR_ORIGINAL_ARRAY>;
const newArray = removeById(arr, "599a12fdbf50847b0972a2a5");
Kindly help me in sorting the below JSON list in the controller and display in the view.
Actually orderBy filter sorting one level, But I need it sort even for childs recursively.
Input:
R2
-->S4
------>T5
------>T4
-->S3
R1
-->S2
------>T2
------>T1
-->S1
Output:
R1
-->S1
------>T1
------>T2
-->S2
R2
-->S3
------>T4
------>T5
-->S4
Please find the sample in Plunker.
http://plnkr.co/edit/JslHwJ1CBREKf6FgYHaZ?p=preview
var sortNames = function(arr){
arr = arr.sort(function(a,b){
return a.name > b.name;
})
for (var i = 0; i < arr.length; i++){
if (arr[i].childs){
sortNames(arr[i].childs)
}
}
return arr;
}
var names = [
{
"name": "Root1",
"Id": "2f3d17cb-d9e2-4e99-882d-546767f2765d",
"status": "",
"dispName": "",
"imageURL": "",
"childCount": "",
"childs": [
{
"name": "Sub1",
"Id": "ff8b3896-3b80-4e1b-be89-52a82ec9f98f",
"childs": [
{
"name": "Template1",
"Id": "ff8b3896-3b80-4e1b-be89-52a82ec9f981",
"status": "",
"dispName": "",
"imageURL": ""
},
{
"name": "Template2",
"Id": "ff8b3896-3b80-4e1b-be89-52a82ec9f982",
"status": "",
"dispName": "",
"imageURL": ""
}
]
},
{
"name": "Template3",
"Id": "ff8b3896-3b80-4e1b-be89-52a82ec9f981"
}
]
},
{
"name": "Root2",
"Id": "ea0586e7-02cf-4359-94ba-8d9623590dfe",
"childs": [
{
"name": "Sub2",
"Id": "6f1b3a60-d295-413e-92ef-1c713446e6c9",
"childs": [
{
"name": "Template4",
"Id": "6f1b3a60-d295-413e-92ef-1c713446e6c1"
},
{
"name": "Template5",
"Id": "6f1b3a60-d295-413e-92ef-1c713446e6c2"
}
]
}
]
}
];
sortNames(names);
I have 2 json files,services.json and services_show.json.At page load am fetching the data from services.json and it working properly.On a button click,i need to fetch the contents from service_show.json and append to the services array but it does not work.
var beautyApp = angular.module('findbeauty', []);
beautyApp.controller('beautycntrl',function($scope,$http){
$http.get('http://localhost/Find-Beauty/media/services.json').success(function(data) {
$scope.services=data.services;
$scope.services1=data.services1;
});
$scope.Add = function(){
$http.get('http://localhost/Find-Beauty/media/services_show.json').success(function(data) {
console.log(angular.toJson(data.services));
$scope.services.push(data.services);
});
};
$scope.ViewMore = function(){
});
Services.json
{
"services":[
{
"name": "Arun",
"gender": "Damen",
"duration": "1.5 Stunden",
"price": "€65,00",
"imagepath": "media/images/prfilepic1.png",
"percentage": "90%"
},
],
"services1":[
{
"name": "Schnitt & Föhnen",
"gender": "Damen",
"duration": "1.5 Stunden",
"price": "€65,00",
"imagepath": "media/images/profilepic4.png",
"percentage": "25%"
},
]
}
service_show.json
{
"services":[
{
"name": "Schnitt & Föhnen",
"gender": "Damen",
"duration": "1.5 Stunden",
"price": "€65,00",
"imagepath": "media/images/profilepic4.png",
"percentage": "5%"
},
],
"services1":[
{
"name": "Schnitt & Föhnen",
"gender": "Damen",
"duration": "1.5 Stunden",
"price": "€65,00",
"imagepath": "media/images/prfilepic1.png",
"percentage": "50%"
},
]
}
How can i push the services_show.json data to $scope.services ? Any Help?
Array.prototype.push.apply() can be used for merging two arrays.
Merge the second array into the first one
$scope.services.push.apply($scope.services, data.services);
You need to push one item at a time, like
angular.forEach(data.services,function(item) {
$scope.services.push(item);
});
You also can use concat:
Here I have my own code: Please refer
$http.get('store/LoadAlbums/', {'iCategoryID': iCategoryID}).then(function (data) {
for (var i = 0; i < $scope.result.mainalbums.length; i++) {
if($scope.result.mainalbums[i].iCategoryID == iCategoryID){
$scope.result.mainalbums[i].albums = $scope.result.mainalbums[i].albums.concat(data.data.albums);
$scope.result.mainalbums[i].totalAlbumCategory = $scope.result.mainalbums[i].albums.concat(data.data.totalAlbumCategory);
$scope.result.mainalbums[i].loadmore = $scope.result.mainalbums[i].albums.concat(data.data.loadmore);
$scope.result.mainalbums[i].newpage = $scope.result.mainalbums[i].albums.concat(data.data.newpage);
}
} });
I am trying to use for..in loop to access the description key/value within 'Event' but at the moment am not fully sure how to achieve this. First of all I used the for..in and logged this out, this returns all the top level entries in the response, how do I now drill down and pick out Event.description? I first of all thought it was data[prop].Event.description but thats not the case. Should I be using a normal for loop and then the for..in inside of this?
Here is my current code:
$(document).ready(function() {
var data = {
"status": "ok",
"code": "200",
"message": "event details",
"data": [{
"Event": {
"id": "1",
"name": "Sample Event Number 1",
"description": "Sample Event Number 4 Description ....",
"event_date": "2012-05-31 00:00:00",
"Band": [{
"id": "1",
"name": "Support #1",
"BandsEvent": {
"id": "7",
"band_id": "2",
"event_id": "8",
"created": "2012-05-23 15:53:56",
"modified": "2012-05-23 15:53:56"
}},
{
"id": "2",
"name": "Support #2",
"BandsEvent": {
"id": "8",
"band_id": "1",
"event_id": "8",
"created": "2012-05-23 15:53:57",
"modified": "2012-05-23 15:53:57"
}}]
}},
{
"Event": {
"id": "2",
"name": "Sample Event Number 2",
"description": "Sample Event Number 4 Description ....",
"event_date": "2012-05-31 00:00:00",
"Band": [{
"id": "2",
"name": "Another Crazy Band",
"BandsEvent": {
"id": "3",
"band_id": "2",
"event_id": "8",
"created": "2012-05-23 15:53:56",
"modified": "2012-05-23 15:53:56"
}},
{
"id": "4",
"name": "The Band",
"BandsEvent": {
"id": "8",
"band_id": "1",
"event_id": "8",
"created": "2012-05-23 15:53:57",
"modified": "2012-05-23 15:53:57"
}}]
}}]
}
var prop;
for (prop in data) {
console.log( data[prop] );
// data.Event.description
}
});
This should do what you want:
for (var i = 0; i < data.data.length; i++) {
console.log(data.data[i].Event.description);
}
I should add that the reason that your code doesn't work is that the "prop" variable would first be "status", then "code", then "message" and THEN "data". Status/code/message has no "Event" property, so therefore your code would return undefined if you'd try to access data[prop].Event. Here we pick them out specifically. And since that data.data is an array, there's no reason to use a for .. in loop, but rather just a regular for loop.
Likewise, if you would want to print out the descriptions AND the bands, you could do the following:
for (var i = 0; i < data.data.length; i++) {
console.log(data.data[i].Event.description + " has the following bands:");
for (var j = 0; j < data.data[i].Event.Band.length; j++) {
console.log(data.data[i].Event.Band[j].name);
}
}
May be you can help me with my task. I have a JSON string:
{
"chats":[
{"id":"1","time":"13:02", "from_id":"2692","text":"1","to_id":"62"},
{"id":"2","time":"13:48", "from_id":"62","text":"Hello!","to_id":"2692"},
{"id":"12","time":"15:47", "from_id":"2692","text":"3","to_id":"62"},
{"id":"13","time":"15:48", "from_id":"62","text":"4","to_id":"2692"},
{"id":"30","time":"08:57", "from_id":"2692","text":"To me","to_id":"62"},
{"id":"31","time":"09:28", "from_id":"66","text":"From user1","to_id":"2692"},
{"id":"32","time":"09:29", "from_id":"66","text":"From user1","to_id":"2692"},
{"id":"32","time":"09:29", "from_id":"2692","text":"From user1","to_id":"66"}
],
"lastid": "32"
}
var my_id = 2692 /*My chats*/
/*Success JSON request below*/
onSuccess: function(m){
var messages = [];
var chanels = [];
var chanels_u = [];
for(var i=0; i<m.chats.length;i++){
if (my_id != '' && m.chats[i].from_id != parseInt(my_id)){
chanels.push(m.chats[i].from_id);
}
}
chanels_u = chanels.unique(); /*We get id's: 62,66*/
}
My Question:
How can I create a new arrays dynamically (2 for this example for: 62 and 66) and push messages?
To 1 (62):
{"id":"1","time":"13:02", "from_id":"2692","text":"1","to_id":"62"},
{"id":"2","time":"13:48", "from_id":"62","text":"Hello!","to_id":"2692"},
{"id":"12","time":"15:47", "from_id":"2692","text":"3","to_id":"62"},
{"id":"13","time":"15:48", "from_id":"62","text":"4","to_id":"2692"},
{"id":"30","time":"08:57", "from_id":"2692","text":"To me","to_id":"62"}
To 2 (66):
{"id":"31","time":"09:28", "from_id":"66","text":"From user1","to_id":"2692"},
{"id":"32","time":"09:29", "from_id":"66","text":"From user1","to_id":"2692"},
{"id":"32","time":"09:29", "from_id":"2692","text":"From user1","to_id":"66"}
Thanks!
You are already identifying your chat ID and pushing it into the chanels array in your code:
if (my_id != '' && m.chats[i].from_id != parseInt(my_id)){
chanels.push(m.chats[i].from_id);
}
You are also identifying unique IDs in your code:
chanels_u = chanels.unique();
All you need to do is locate your chats from the JSON object by comparing them to the IDs in chanels_u and if there's a match, push the text field to the messages array. This is should be close to what you require:
for(var i=0; i<m.chats.length;i++){
for(var j=0; j<chanels_u.length;j++){
if (my_id !== '' && m.chats[i].from_id === chanels_u[j]){
messages.push(m.chats[i].text);
}
}
}
this will do what you want, i believe - create a new object with keys of the to_id and from_id in a way that allows you to loop them whichever way you want. it would probably make more sense to have a toUser and fromUser objects that you can loop independently and cross reference as you build the replies but it's trivial to do so.
var chats = {
"chats":[
{"id":"1","time":"13:02", "from_id":"2692","text":"1","to_id":"62"},
{"id":"2","time":"13:48", "from_id":"62","text":"Hello!","to_id":"2692"},
{"id":"12","time":"15:47", "from_id":"2692","text":"3","to_id":"62"},
{"id":"13","time":"15:48", "from_id":"62","text":"4","to_id":"2692"},
{"id":"30","time":"08:57", "from_id":"2692","text":"To me","to_id":"62"},
{"id":"31","time":"09:28", "from_id":"66","text":"From user1","to_id":"2692"},
{"id":"32","time":"09:29", "from_id":"66","text":"From user1","to_id":"2692"},
{"id":"32","time":"09:29", "from_id":"2692","text":"From user1","to_id":"66"}
],
"lastid": "32"
};
var newchats = {}, my_id = 2692;
chats.chats.each(function(chat) {
if (!chat.id || !chat.id.length || chat.from_id == my_id)
return;
newchats["from" + chat.from_id] = newchats["from" + chat.from_id] || [];
newchats["from" + chat.from_id].push(chat);
newchats["to" + chat.to_id] = newchats["to" + chat.to_id] || [];
newchats["to" + chat.to_id].push(chat);
});
console.log(newchats, JSON.encode(newchats));
see on jsfiddle http://jsfiddle.net/dimitar/7j2SN/, outputs:
{
"from62": [{
"id": "2",
"time": "13:48",
"from_id": "62",
"text": "Hello!",
"to_id": "2692"},
{
"id": "13",
"time": "15:48",
"from_id": "62",
"text": "4",
"to_id": "2692"}],
"to2692": [{
"id": "2",
"time": "13:48",
"from_id": "62",
"text": "Hello!",
"to_id": "2692"},
{
"id": "13",
"time": "15:48",
"from_id": "62",
"text": "4",
"to_id": "2692"},
{
"id": "31",
"time": "09:28",
"from_id": "66",
"text": "From user1",
"to_id": "2692"},
{
"id": "32",
"time": "09:29",
"from_id": "66",
"text": "From user1",
"to_id": "2692"}],
"from66": [{
"id": "31",
"time": "09:28",
"from_id": "66",
"text": "From user1",
"to_id": "2692"},
{
"id": "32",
"time": "09:29",
"from_id": "66",
"text": "From user1",
"to_id": "2692"}]
}
I guess, JSON is invalid. You missed to close the JSON properly.
{
"chats": [
{
"id": "1",
"time": "13:02",
"from_id": "2692",
"text": "1",
"to_id": "62"
},
{
"id": "2",
"time": "13:48",
"from_id": "62",
"text": "Hello!",
"to_id": "2692"
},
{
"id": "12",
"time": "15:47",
"from_id": "2692",
"text": "3",
"to_id": "62"
},
{
"id": "13",
"time": "15:48",
"from_id": "62",
"text": "4",
"to_id": "2692"
},
{
"id": "30",
"time": "08:57",
"from_id": "2692",
"text": "To me",
"to_id": "62"
},
{
"id": "31",
"time": "09:28",
"from_id": "66",
"text": "From user1",
"to_id": "2692"
},
{
"id": "32",
"time": "09:29",
"from_id": "66",
"text": "From user1",
"to_id": "2692"
}
]
}
Use JSONLINT to validate your data. You can update(get/set) this array dynamically as you wish.
var msgBox={"chats":[]};
var msg={"id":1,"time":(new Date()).getTime(),"from_id":"","text":"","to_id":""};
var info={ // whole JSON data }
var chats=info['chats'];
for(m in chats){
console.log(chats[m].text) // will display the text
console.log(chats[m].time) // will display the time of chat
chat[m].to_id=32424; // you can modify the to_id value
}
You can make chanels and object instead of array.
onSuccess: function(m){
var messages = [];
var chanels = {};
var chanels_u = [];
for(var i=0; i<m.chats.length;i++){
if (my_id != '' && m.chats[i].from_id != parseInt(my_id)){
var fromID = m.chats[i].from_id;
if(!chanels[fromID]){
chanels[fromID] = [];
}
chanels[fromID].push(m.chats[i]);
}
}
//chanels_u = chanels.unique(); /*We get id's: 62,66*/
}