![](/img/trans.png)
[英]Find the parent of a precise child to then select a child with jQuery
[英]How to find parent in a json array if i select child inside child
如果我 select 从具有值 id 的选择器标签中找到来自他们的任何一个孩子,如何找到具有完整信息的父 object,如它包含的所有孩子。
这是我的 html 代码:
<select class="form-control show-tick" id="service_category" data-live-search="true" formControlName="service_category" (change)="selectCategory()">
<option selected="" value="">Select</option>
<ng-template #recursiveList let-categories>
<ng-container *ngFor="let category of categories">
<option [ngValue]="category.id">
<i *repeatTimes="category.depth" class="material-icons">remove</i>
<span *ngIf="category.parent != null">{{ category.name }}</span>
<b *ngIf="category.parent == null">{{ category.name }}</b>
</option>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: category.children}"></ng-container>
</ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: categories}"></ng-container>
</select>
这是我的 json 阵列:
[
{
"id": 1,
"name": "Travel",
"parent": null,
"children": [
{
"id": 2,
"name": "Car",
"parent": 1,
"children": [
{
"id": 3,
"name": "Cab Booking",
"parent": 2
}
]
}
]
}
]
我希望如果我从 select 选项预订 select 出租车,那么我可以得到整个阵列 object 及其父母和所有孩子。
您必须将 JSON 数据解析为 JavaScript 数据。 解析数据后,您可以对数据进行后处理并将所有父 ID 替换为对父 ID 的引用。 然后你可以使用整个category
object 作为[ngValue]
而不仅仅是id
。 在这些更改之后,您可以使用以下表达式在两个方向上遍历整个树:
category.parent.parent
category.children[2].children[0]
category.parent.children[2]
这是一个 2 级嵌套对象数组的最小示例,例如您的问题:
import { Component } from "@angular/core";
const json = `[
{
"id": 1,
"name": "Travel1",
"parent": null,
"children": [
{
"id": 2,
"name": "Car",
"parent": 1,
"children": [
{
"id": 3,
"name": "Cab Booking",
"parent": 2
}
]
},
{
"id": 4,
"name": "Bike",
"parent": 1,
"children": [
{
"id": 5,
"name": "Bike Booking",
"parent": 4
}
]
}
]
}, {
"id": 11,
"name": "Travel2",
"parent": null,
"children": [
{
"id": 12,
"name": "Car",
"parent": 11,
"children": [
{
"id": 13,
"name": "Cab Booking",
"parent": 12
}
]
},
{
"id": 14,
"name": "Bike",
"parent": 11,
"children": [
{
"id": 15,
"name": "Bike Booking",
"parent": 14
}
]
}
]
}
]`;
interface Obj {
id: number;
name: string;
parent: Obj | null;
children?: Obj[];
}
@Component({
selector: "my-app",
template: `
<div *ngIf="objs">
<select [(ngModel)]="value">
<ng-container *ngFor="let obj of objs">
<ng-container *ngFor="let child of obj.children">
<option *ngFor="let el of child.children" [ngValue]="el">
{{ el.id }}
</option>
</ng-container>
</ng-container>
</select>
<p *ngIf="value">Children: {{ value.children }}</p>
<p *ngIf="value">Parent: {{ value.parent.name }}</p>
<p *ngIf="value">
Parent's first child: {{ value.parent.children[0].name }}
</p>
<p *ngIf="value">Grandparent: {{ value.parent.parent.name }}</p>
<p *ngIf="value">
Grandparent's first child: {{ value.parent.parent.children[0].name }}
</p>
</div>
`
})
export class AppComponent {
objs: Obj[] | null = null;
value: Obj | null = null;
ngOnInit() {
this.objs = JSON.parse(json).map(obj => {
obj.children.forEach(child => {
child.parent = obj;
child.children.forEach(grandchild => (grandchild.parent = child));
});
return obj;
});
}
}
选定的类别存储在变量value
中,可以根据需要向上遍历树并返回。 这个最小的例子仅限于给定的结构(2 级嵌套对象的数组)。
这是现场演示stackblitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.