I'm trying to show charts based on some json. I made a pipe to access the various parts of the json object but don't know how to use the data, which looks like this:
[ { "name": "Completed", "value": 50 }, { "name": "Remaining", "value": 50 } ]
within the ngFor.
So normally I would do something like this:
<ngx-charts-advanced-pie-chart
mdTooltip="Click to change unit"
[tooltipDisabled] = "true"
[scheme]="colorScheme"
[results]="results" <----this is where the results normally go
[gradient]="gradient"
[view]="view"
(select)="onChartClick()"
>
</ngx-charts-advanced-pie-chart>
And I want to try something like this:
<div *ngFor="let chair of targetChairs | chairDimensions">
<ngx-charts-advanced-pie-chart
mdTooltip="Click to change unit"
[tooltipDisabled] = "true"
[scheme]="colorScheme"
[results]="{{ chair.value.data.height | json }}"
[gradient]="gradient"
[view]="view"
(select)="onChartClick()"
>
</ngx-charts-advanced-pie-chart>
</div>
This doesn't work but is there a way to achieve this?
So I found a similar issue on a git page here which solved my problem, so here is what I used in case someone else has this problem:
<div *ngFor="let chair of targetChairs | chairDimensions">
<ngx-charts-advanced-pie-chart
mdTooltip="Click to change unit"
[tooltipDisabled] = "true"
[scheme]="colorScheme"
[results]="chair.value.data.feet"
[gradient]="gradient"
[view]="view"
(select)="onChartClick()"
>
</ngx-charts-advanced-pie-chart>
</div>
Related
I am using Ng-Zorro's multiple select, which is in a drawer. When opening the drawer, I give the select element a list of options and a list of items that are already chosen. The list of options to pick from works fine, but the already selected items do not show. This can be seen here as well: StackBlitz
The code:
<nz-select [(ngModel)]="selectedAttributes"
[nzMaxTagCount]="3"
[nzMaxTagPlaceholder]="attributeTagPlaceHolder"
nzMode="multiple"
name="changeAttributes"
id ="changeAttributes"
nzPlaceHolder="Please select">
<nz-option *ngFor="let attribute of allAttributes" [nzLabel]="attribute.name" [nzValue]="attribute"></nz-option>
</nz-select>
<ng-template #attributeTagPlaceHolder let-selectedList> "and " {{ selectedList.length }} " more items" </ng-template>
where the allAttributes list is formatted like this:
allAttributes= [
{
"id": 1,
"name": "Mask"
},
{
"id": 2,
"name": "Intensive"
},
{
"id": 3,
"name": "Family"
},
{
"id": 4,
"name": "Isolation"
}
];
and where the selectedAttributes is one or more of the items in the allAttributes list:
selectedAttributes= [{"id": 1,"name": "Mask"}];
No matter how I create or format the selected attributes list (it can be straight from the allAttributes list), the placeholder cannot be seen and the select is empty, plus when picking all options, the nzMaxTagPlaceholder shows there is an extra item picked.
Can anyone show me the way to set the selected items dynamically?
Try sth like below.
selectedAttributes = [this.allAttributes[0]];
Since
{"id": 1,"name": "Hapnikumask"}
is a complex object its equality will be checked by references. So you are defining a new object as selected it will be different from the source object.
use compareFn in your nz-select like this.
<nz-select
[(ngModel)]="selectedValue"
[compareWith]="compareFn"
(ngModelChange)="log($event)"
nzAllowClear
nzPlaceHolder="Choose"
>
in typescript file:-
compareFn = (o1: any, o2: any): boolean => (o1 && o2 ? o1.id === o2.id : o1 === o2);
Suppose I have the following data:
{
"dashboards": [
{
"name": "first",
"type": "standard"
},
{
"name": "second",
"type": "custom"
}
]
}
(actually there's a lot more data than that, I am just showing what the structure of the data is)
What I am trying to do is get the first 10 dashboards of type standard.
I know I can get all the standard dashboards with:
jq '.dashboards[] | select(.type == "standard")'
But I can't figure out how to slice the resulting array...
If you want the result as an array, you could use map:
.dashboards | map(select(.type=="standard")) | .[0:10]
However, this is inefficient. For efficiency, it would be better to use limit as discussed below.
If you wanted the items as a stream, you could write:
limit(10; .dashboards[] | select(.type=="standard"))
If you want the results as an array, simply wrap the above jq expression in square brackets.
I have a JSON file containing an array of objects (test.json):
[
{
"name": "Test 1",
"id": 1
},
{
"name": "Test 2",
"id": 2
},
{
"name": "Test 3",
"id": 3
}
]
I want to extract all objects, that have a certain ID. I managed to get an object if I want just one specific ID: jq 'map(select(.id == 2 ))' test.json.
Thing is, I have a list of IDs, say 1 and 3. How do I get a list containing only those object? So in this example a list containing the objects with ID 1 and 3?
You can check the example here: https://jqplay.org/s/xQgpA4yJAz
jq 'map(select(.id | contains(1,3)))'
Man, jq is so great
https://github.com/stedolan/jq/wiki/Cookbook#filter-objects-based-on-the-contents-of-a-key
The solution using contains/1 as presented on this page could just as well be written using ==:
map(select(.id == (1,3)))
The main reason for mentioning this is that contains is full of potential surprises. (Consider, for example, what would happen if .id were string-valued.)
Unfortunately, using either == or contains as above is computationally inefficient (it is O(m*n)), though in practice it is quite fast.
Totally noob question from me. Different from other JSON nested questions, I want to access the value of the middle level.
Consider that I have a JSON like:
"nodes":[
{"Level1":[
{"Level2A":[
{"Level3A":"Value",
"Level3B":"Value"
},
{"Level3A":"Value",
"Level3B":"Value"
}]
},
{"Level2B":[
{"Level3A":"Value",
"Level3B":"Value"
},
{"Level3A":"Value",
"Level3B":"Value"
}]
}]
}]
I want to get the value of Level2 out(to use as label).
I can get lv3 value by calling for example,:
node.datum().Level1[0].Level2[0].Level3A
but if I tried
nodae.datum().Level1[].Level2
I get an object instead. The ideal output would be the array with [Level2A, Level2B,...]
Are you sure your json is in valid mode or you just post half of it?
That what I did-
{"nodes":[{"Level1":[{"Level2A":[{"Level3A":"Value","Level3B":"Value"},{"Level3A":"Value", "Level3B":"Value"}],"Level2B":[{"Level3A":"Value","Level3B":"Value"}]}]}]}
This is kind of a next-step from filter data using dropdown?, and callmekatootie's answer-plunk (http://plnkr.co/edit/n7TebC). Taking that and a few other things, I've got two dropdowns that can act together/apart to filter the data set, and I've applied a limit so it'll only show 4 (and then four more on ng-click, etc). The current plunk is here: http://plnkr.co/edit/Sc283f.
If I set the data inside the scope (no $http), and turn off the quantity limit, the two filters work perfectly.
If I add the limit first, like this:
<li data-ng-repeat="item in data | limitTo:quantity | filter:customFilter">
then it's giving me the first 4 items in data and then applying the filter, which in some cases gets me nothing. But if I reverse that and get the data first:
<li data-ng-repeat="item in data | filter:customFilter | limitTo:quantity">
the limit only works the first time. Change either filter and the limit no longer seems to apply regularly/correctly/something.
And if I change the data to come in via $http, none of it works. I just get the entire set, no filter, no limit. I could probably live with and/or figure out a way around and/or eventually fix the first two issues (the filters and the limit) but I just can't see any reason why the filters/limit work (mostly) when the data is local, but fail when the data's coming in through $http.
I'm sure I'm missing something really obvious and simple, but hell if I know. Anyone?
The test data is an array of animals...
[
{ animal : 'dog', color : 'blue'},
{ animal : 'cat', color : 'red'}
]
But the JSON downloaded by $http is an object with an animal in each property...
{
"0": {"title": "...", "animal": "dog", "color": "purple"},
"1": {"title": "...", "animal": "cat", "color": "yellow"}
}
Angular's built in filter only accepts arrays, which is why it's being bypassed when you give it an object instead.
You can change the service to return an array, or you can transform the data to an array when returned from $http with a function like this...
function toArray(data) {
var items = [];
angular.forEach(data, function (value) {
items.push(value);
});
return items;
}
$http.get('demo.json').success(function(data) {
$scope.data = toArray(data);
});
Updated Plunker