I have this JSON object that contains an array of devices types and each type has an array of brands:
{
"types": [
{
"type": "phone",
"brands": [“samsung”,”apple”,”LG”, … //a list of brands]
},
{"type": "PC",
"brands": [“DELL”,”apple”,”HP”, … //a list of brands]
},
…// a list of types
]
}
Using AngularJS ng-repeat I can iterate through every array , but I want to show the list of brands one by one in the same button , every value is shown for 2 seconds , in infinite loop, but I can’t figure out a way to do that.
you dont need ng-repeat for this. given that you need to display only one element at a time.
vm.display = {
count : 0,
current : null,
repeat : function() { $interval( vm.display.changeElement(), 2*1000) }
changeElement : function() { vm.display.current = list[vm.display.count] ; vm.display.count++; }
}
then just call vm.repeat() after getting data from server
As mentioned earlier, you can use $interval instead of ng-repeat to do this.
$interval(function(){
$scope.buttonLabel =$scope.data.types[0].brands[$scope.count%3];
$scope.count++;
},2000);
I hope this is what you need. :)
http://plnkr.co/edit/8VIJAN?p=preview
Related
Im trying to filter the elements of this JSON array to return only the first element it will find.
{
"elements": [{
"urn": "urn:li:lyndaCourse:189800",
"details": {
"classifications": [{
"associatedClassification": {
"urn": "urn:li:lyndaCategory:9331",
"type": "LIBRARY"
}
},
{
"associatedClassification": {
"urn": "urn:li:lyndaCategory:8982",
"type": "SUBJECT"
}
},
{
"associatedClassification": {
"urn": "urn:li:lyndaCategory:8920",
"type": "LIBRARY"
}
}
]
}
}]
}
But this results in an EMPTY array [].
I tried this JSONPATH query in https://jsonpath.herokuapp.com/
$.elements[0].details.classifications..associatedClassification[?(#.type=='LIBRARY')][0]
Expecting to get:
[{
"urn": "urn:li:lyndaCategory:9331",
"type": "LIBRARY"
}]
Another way to filter the information is by filtering the property "classification" (without using ".."), and use "associatedClassification.type" in your filter, so you should have something like this:
$.elements[0].details.classifications[?(#.associatedClassification.type=='LIBRARY')]
With the above JSONPATH you will have all items which type is "LIBRARY" (in your example will return 2 items).
You mentioned you need only the first one of the filtered items, as far as I investigated it seems there's no posible solution to return only the first item using only JSONPATH (see the thread bellow):
https://github.com/json-path/JsonPath/issues/272
The following works on all elements:
$..classifications[?(#.associatedClassification.type=='LIBRARY')]
and returns a list of all matching associatedClassification objects.
JSONPath is expected to point inside the original document. Therefore, getting the first element from the result list would require post-processing, e.g. a separate JSONPath, e.g.
$.[0]
I am currently trying to loop through an array of objects (each object is a task), where each task contains relevant information such as a name and date. Information from each task is then utilized in creating an object containing arrays, where each array contains objects that correspond to the date, or the array.
My current code is as follows:
contextTasks.forEach((taskItem) => {
taskItem["taskSchedule"].forEach((dateItem) => {
setItems((items) => ({
...items,
[dateItem["date"]]: [
{
name: taskItem["taskName"],
time: new Date(dateItem["time"]).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
}),
type: "Task",
},
],
}));
});
});
However, if there are multiple tasks with the same date, they will override each other and I only end up with one task per date. How would I go about pushing further objects to the array if there are other entries for that specific date?
Finished object:
Object {
"2021-04-21": Array [
Object {
"name": "Test Class v1",
"type": "Class",
},
],
"2021-04-24": Array [
Object {
"name": "Test Task v2",
"type": "Task",
},
//I would like to add another object here without overriding existing contents of the array
],
}
Have you tried using reduce ?
the idea will be to have something like this inside your accumulator:
{"date1": [{val}, {val}, ...] , "date2": [{val}, {val}, ...]}
array.reduce((acc, val) => {
// test if your accumulator has the same date as your date from the val
if(acc[val.date]) {
acc[val.date] = [... acc[val.date], ...your val]
} else {
// no date found in the accumulator so make acc.date = ...acc.date, val
acc[val.date] = [ val ]
}
}, {})
Sorry if the code is not perfect but if you want provide your initial array of data and I will fix the response code
The cause of your issue is the fact you're executing an async method inside a synchronous loop. Also, modifying state forces a re-render, and you're attempting to do it presumably many times at once. It might, and will cause a bottleneck at some point.
The solution: build your new state first, and execute a setState once.
I have a dropdown with list of states which I am getting through services.In JSON I get list of states with id and label. For ex. id:NJ,label:New Jersey. I have a different response coming from backend which gives me id of 5 states-
ex:
"filters": [
{
"name": "listedStates",
"includedCodes": [
"AZ",
"NJ",
"IN",
"OH",
"WI"
]
}
to populate the list of entire US states in the dropdown, I am iterating like this-
this.addressService.getStates().subscribe(
(data) => {
console.log(data);
if (data) {
//filter with filters array
data.states.forEach(i => {
console.log(data.states);
this.newBaseStatesList.push({ 'value': i.id, 'text': i.label });
console.log(this.newBaseStatesList);
});
}
},
(error) => {
//console.log("An error occurred ");
}
);
Right now my dropdown is getting populated with all the state items in the array whereas I would want to display only 5 states in the dropdown mentioned in the filters array. The problem here is the response I am getting from backend has only ids not the labels and the dropdown should contain the labels values. So I have to somehow map these codes with the states array in such a way that these 5 states get filtered and populated.
My object is in format-
{
id:NJ,
label:New Jersey
}
I would like to check with the state codes in filters array with the states array and display the respective labels. Right now, the entire states are getting populated instead of the 5 states mentioned in the filters array.
You can achieve using as below
this.filters.forEach((filter)=>{
filter.includedCodes.forEach((code)=>{
this.newBaseStatesList.push(_.takeWhile(this.data.states, { 'id': code}))'
});
})
Note:I am using Lodash.
I am not sure the syntax that your service returns for the this.data.states so work need to on it based on the sample json
I have reproduced my issue here: http://jsfiddle.net/1bf4ob05/4/
And here is the issue on github: https://github.com/highcharts/highcharts/issues/6308
Is there some configuration that needs to be passed. It seems to happen when you pass data and mapData separately (see the fiddle or below) and not all of the drilldown data points have values. The null points from one drilldown still show on the drilldown of the second.
mapData : myMapData,
data : myMockData,
Do I need to do some sort of clear or something in my drilldown?
The problem you experience here with points "reoccuring" on new dropdowns is because you are using a single array for your data used in several dropdowns. You have:
var myMockData = [
{
"hc-key": "us-ca-075",
"value": 10
},
{
"hc-key": "us-ny-045",
"value": 40,
},
// ...
];
This array is modified when you use mapData and data in a merge operation based on the 'hc-key'. This messes it up for use in future dropdowns. Print out myMockData after a dropdown to see how it looks.
Instead you could use separate arrays for each new dropdown, for example like this (JSFiddle):
myMockData = {
'California': [
{
"hc-key": "us-ca-075",
"value": 10
},
// ...
],
'New York': [
{
"hc-key": "us-ny-045",
"value": 40,
},
// ...
]
};
And change your addSeriesAsDrilldown to look like:
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
mapData:myMapData,
data:myMockData[e.point.name],
// ...
});
I get my data like below;
[
{
// restaurant details here,
"restaurant_class": {},
"city": {},
"location": {},
"menu_categories": [],
"menu_items": [],
"menu_modifier_groups": [],
"menu_modifier_items": []
}
]
How can I use ng-repeat to group by menu_categories? menu-items is a child of menu_categories
Basically I want to display menu_items, menu_modifier_groups, menu_modifier_items grouping them by menu_categories
i think you can sort (generally manipulate) your array using a filter and then do the ng-repeat, and it won't necessarily change the original data. so inside the html you can do it like this: ng-repeat="item in myArray | myFilter: otherData".
and defining your filter in the js file like:
.filter('myFilter', function () {
return function(input, otherData) {
var output = [];
//some changes using "if"s and other things depending on your sorting algorithm
return output;
};
})
if you have problem with the sorting algorithm, it would help if you could give us the real data...
hope this helps