We Keep Coding

handlebars - However to push all elements in one array into another array as values of one element [duplicate]

This question already has answers here:
From an array of objects, extract value of a property as array
(24 answers)
Closed 1 year ago.
I have an element in my record json file as following:
"custitem_list": [
{
"internalid": "1",
"name": "FLAT AND DULL"
},
{
"internalid": "2",
"name": "FRIZZY"
}
]
Now I need to push the list names from the record into another json record as option values in attribute element.Following is the structure that I'm after.
"attributes": [
{
"id": 0,
"name": "Custlist",
"position": 0,
"visible": true,
"variation": false,
"options": [
{
"FLAT AND DULL",
"FRIZZY"
}
]
}
]
I have tried the following ways, but none of then is working as expected:
{
"id": 0,
"name": "Custlist",
"position": 0,
"visible": true,
"variation": false,
"options": [
{
{{#each record.custitem_list}}
{{#if #index}}
"{{{name}}}"
,{{/if}}
{{/each}}
}
]
}
{
"id": 0,
"name": "Custlist",
"position": 0,
"visible": true,
"variation": false,
"options": [
{
{{#each record.custitem_list}}
{{#if #index}},{{/if}}
{"name": "{{{name}}}"}
{{/each}}
]
}
{
"id": 0,
"name": "Custlist",
"position": 0,
"visible": true,
"variation": false,
"options": [
{
{{#each record.custitem_list }}
{{#if #index}},
{{/if}}
"{{{name}}}"
{{/each}}
}
]
}
Could anyone shed me some light?
Many many thanks

Try this:
const names = obj.custitem_list.map(item => item.name);
obj2.attributes.options = names

Parsing categories tree into HTML select tag

I have this categories tree input :
"categories": [
{
"text": "Upstate",
"id": 3,
"category_parent_id": 0,
"children": []
},
{
"text": "North",
"id": 2,
"category_parent_id": 0,
"children": [
{
"text": "Child N 1",
"id": 5,
"category_parent_id": 2,
"children": [
{
"text": "Another Child 1",
"id": 11,
"category_parent_id": 5,
"children": []
},
{
"text": "Another Child 2",
"id": 10,
"category_parent_id": 5,
"children": []
}
]
},
{
"text": "Activity",
"id": 4,
"category_parent_id": 2,
"children": []
}
]
},
{
"text": "Health",
"id": 1,
"category_parent_id": 0,
"children": [
{
"text": "Good Health",
"id": 9,
"category_parent_id": 1,
"children": []
},
{
"text": "Bad Health",
"id": 8,
"category_parent_id": 1,
"children": []
}
]
}
]
So, now I want to populate my select box like this :
Upstate
North
-Child N 1
--Another Child 1
--Another Child 2
-Activity
Health
-Good Health
-Bad Health
So, how can I parse through the input tree and populate the select box with these values? Any algorithm or recursive function approach I can use to achieve this ?

make a recursive function
flatCategories(data: any[], children: any[], index: number) {
data=data||[];
children.forEach(x => {
data.push({ id: x.id, text: '-'.repeat(index) + x.text });
if (x.children && x.children.length)
this.flatCategories(data, x.children, index + 1)
})
return data
}
You can use like
let dataFlat=this.flatCategories([], this.data.categories, 0);
console.log(this.dataflat.map(x => x.text))
If you want to create a recursive component it's easy (but in case of select not work)
#Component({
selector: 'item-line',
template: `
<div *ngFor="let item of children" [style.margin-left]="index+'rem'">
{{item.text}}
<item-line *ngIf="item.children" [children]="item.children" [index]="index+1">
</item-line>
</div>
`,
})
export class HelloComponent {
#Input() children:any[]
#Input() index:number=0;
}
You can see in stackblitz

Limit select option with another select with angularjs

My object from database is coming like this:
[
{
"id": 8,
"concessionaria": {
"id": 1,
"nome": "asda"
},
"plano": {
"id": 1,
"sigla": "B3",
"nome": "tetes"
},
"descricao": "45987",
"enable": true
},
{
"id": 7,
"concessionaria": {
"id": 2,
"nome": "teste2"
},
"plano": {
"id": 3,
"sigla": "b4",
"nome": "Teste 2"
},
"descricao": "qweqwe",
"enable": true
},
{
"id": 6,
"concessionaria": {
"id": 2,
"nome": "teste2",
"estado": "ES"
},
"plano": {
"id": 2,
"sigla": "B3",
"nome": "Consumidores"
},
"descricao": "werwerw",
"enable": true
}
]
And i need to show two select, to choose the "concessionaria" and then the "planos" it has.
How can i do it since the "concessionaria" comes multiple times as the "plano" changes?

You have to create new model.
This sample show to you how can convert or create new model to get the concessionaria and plano as array to make them as select option
var app = angular.module("app", []);
app.controller("ctrl", [
"$scope",
function($scope) {
var json = [{
"id": 8,
"concessionaria": {
"id": 1,
"nome": "asda"
},
"plano": {
"id": 1,
"sigla": "B3",
"nome": "tetes"
},
"descricao": "45987",
"enable": true
},
{
"id": 7,
"concessionaria": {
"id": 2,
"nome": "teste2"
},
"plano": {
"id": 3,
"sigla": "b4",
"nome": "Teste 2"
},
"descricao": "qweqwe",
"enable": true
},
{
"id": 6,
"concessionaria": {
"id": 2,
"nome": "teste2",
"estado": "ES"
},
"plano": {
"id": 2,
"sigla": "B3",
"nome": "Consumidores"
},
"descricao": "werwerw",
"enable": true
}
];
$scope.model = {
concessionaria: [],
plano: []
};
angular.forEach(json, function(item) {
var concessionaria = item.concessionaria;
var plano = item.plano;
$scope.model.concessionaria.push(concessionaria);
$scope.model.plano.push(plano);
});
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<label>concessionaria</label>
<select ng-model="form.concessionaria" ng-options="item as item.nome for item in model.concessionaria"></select> {{form.concessionaria}}
<hr />
<label>plano</label>
<select ng-model="form.plano" ng-options="item as item.nome for item in model.plano"></select> {{form.plano}}
</div>

You can use limitTo filter.
For example: ng-repeat="item in items | limitTo 2"
For more informations: https://www.w3schools.com/angular/ng_filter_limitto.asp

You will need two selects, populate the first select with distinct values of concessionaria, and once user select a value from the first select you will have the id of concessionaria, then depending on that value you can populate the second select box with different plano. So if user selects a concessionaria with id 2 your second select box will be populated with two plano (one with plano id 2 and other with plano id 3)

Populating fields from 1 object into another through (for ... in ...) loop

The issue I'm having is as follows: I'm attempting to populate a Javascript object (called Table) with content from another object (called Messages)
I'm trying to do this by matching 2 keys in the Table object with 2 keys from the Messages object. The keys I'm trying to match can be described as 'row' and 'cell'.
If the message 'row' and 'cell' match, I push the message into the cell.
Information
- Rows are unique keys at the top level of the object and are called 'labs'.
- Cells are unique keys in Rows, but a Cell key might have a duplicate in another row. They are called 'steps'.
My thoughts were that to uniquely identify a cell, it would be possible to compare the Row + Cell key of the Table cell I want to populate with the Row + Cell key of the message. If they match, populate the Table cell.
The object I'm trying to populate looks as following (before population):
{
"570f5233c8640c8819dae6a2": {
"570f5215c8640c8819dae6a0": {
"_id": "570f5215c8640c8819dae6a0",
"time": 2,
"type": "Type 1",
"order": 0,
"messages": []
},
"570f927196fa91ab0a1d8793": {
"_id": "570f927196fa91ab0a1d8793",
"time": 0,
"type": "Type 2",
"order": 1,
"messages": []
}
},
"570f52caecbdcb2c1a7031f1": {
"570f5215c8640c8819dae6a0": {
"_id": "570f5215c8640c8819dae6a0",
"time": 2,
"type": "Type 1",
"order": 0,
"messages": []
},
"570f927196fa91ab0a1d8793": {
"_id": "570f927196fa91ab0a1d8793",
"time": 0,
"type": "Type 2",
"order": 1,
"messages": []
}
}
}
The code I'm using to populate the object above as follows (I'm populating the messages field):
for (let msgKey in messages) {
if (messages.hasOwnProperty(msgKey)) {
for (let tableRowKey in table) {
if (table.hasOwnProperty(tableRowKey)) {
for (let cellRowKey in table[tableRowKey]) {
if (table[tableRowKey].hasOwnProperty(cellRowKey)) {
let msgRow = messages[msgKey].lab.toString();
let msgStep = messages[msgKey].step.toString();
if (tableRowKey === msgRow && cellRowKey === msgStep) {
table[tableRowKey][cellRowKey].messages.push(messages[msgKey]);
}
}
}
}
}
}
}
The output from the code looks as follows (after population):
{
"570f5233c8640c8819dae6a2": {
"570f5215c8640c8819dae6a0": {
"_id": "570f5215c8640c8819dae6a0",
"time": 2,
"type": "Type 1",
"order": 0,
"messages": [
{
"step": "570f5215c8640c8819dae6a0",
"time": 2,
"timeActual": 0.00010335648148148148,
"timeDifference": null,
"isComplete": true,
"lab": "570f5233c8640c8819dae6a2"
}
]
},
"570f927196fa91ab0a1d8793": {
"_id": "570f927196fa91ab0a1d8793",
"time": 0,
"type": "Type 2",
"order": 1,
"messages": [
{
"step": "570f927196fa91ab0a1d8793",
"time": 0,
"timeActual": 0.00007015046296296297,
"timeDifference": null,
"isComplete": true,
"lab": "570f52caecbdcb2c1a7031f1"
}
]
}
},
"570f52caecbdcb2c1a7031f1": {
"570f5215c8640c8819dae6a0": {
"_id": "570f5215c8640c8819dae6a0",
"time": 2,
"type": "Type 1",
"order": 0,
"messages": [
{
"step": "570f5215c8640c8819dae6a0",
"time": 2,
"timeActual": 0.00010335648148148148,
"timeDifference": null,
"isComplete": true,
"lab": "570f5233c8640c8819dae6a2"
}
]
},
"570f927196fa91ab0a1d8793": {
"_id": "570f927196fa91ab0a1d8793",
"time": 0,
"type": "Type 2",
"order": 1,
"messages": [
{
"step": "570f927196fa91ab0a1d8793",
"time": 0,
"timeActual": 0.00007015046296296297,
"timeDifference": null,
"isComplete": true,
"lab": "570f52caecbdcb2c1a7031f1"
}
]
}
}
}
If it was matching correctly, the message would be populated in an object when the message "lab" key and the message "step" key matched the parent keys. So a correct object would look as follows:
"570f5233c8640c8819dae6a2": {
"570f5215c8640c8819dae6a0": {
"_id": "570f5215c8640c8819dae6a0",
"time": 2,
"type": "Type 1",
"order": 0,
"messages": [
{
"step": "570f5215c8640c8819dae6a0",
"time": 2,
"timeActual": 0.00010335648148148148,
"timeDifference": null,
"isComplete": true,
"lab": "570f5233c8640c8819dae6a2"
}
]
}
However, the code is in fact populating messages in fields where the parent keys do not match, as you can see from the after population code included above.
What exactly is wrong here, to me the code looks correct, am I missing something about matching Javascript keys?

How to Group ng-repeat subdocuments?

I am using AngularJS, where i have SubDocuments and my JSON comes like below. I would like to know how do i group my subdocuments(list inside orderfood). my plunker link. the result i am getting now is.
Isnain Meals
Chicken Burger
Chicken Burger
but i would like my result like this
Isnain Meals
Chicken Burger(2)
The JSON data
$scope.lists = [
{
"_id": "56b0c315e179bb0e00a44dbf",
"orderfood": [
{
"_id": "569d865bff1fe20e00f8ba97",
"qty": "1",
"confirm": true,
"price": 154,
"name": "Isnain Meals"
}
],
"content": "9176649143",
"created": "2016-02-02T14:54:13.926Z"
},
{
"_id": "56b06ed25b53250e00ccbd73",
"orderfood": [
{
"_id": "569d84f04834c10e003dff36",
"qty": "1",
"confirm": true,
"price": 125,
"name": "Chicken Burger"
}
],
"content": "6886058585",
"created": "2016-02-02T08:54:42.986Z"
},
{
"_id": "56b06ed25b53250e00ccbd74",
"orderfood": [
{
"_id": "569d84f04834c10e003dff37",
"qty": "1",
"confirm": true,
"price": 125,
"name": "Chicken Burger"
}
],
"content": "6886058585",
"created": "2016-02-02T08:54:42.986Z"
}];
my plunker link

You can use the filter "groupBy"
<div ng-repeat="(key, value) in lists | groupBy: 'name'">
{{key}} ({{value.length}})
</div>
value is the list of grouped data.
see related question:
How can I group data with an Angular filter?

I used lodash to group the subdocuments
$scope.groupedByFoodName = _.chain($scope.lists).map(function(each) {
return each.orderfood
}).flatten().groupBy(function(each) {
return each.name
}).value();
demo