用Angular 6中的JSON过滤

Question

cities.json

[
    { "id": "1", "name": "Mumbai", "state": "Maharashtra" },
    { "id": "2", "name": "Delhi", "state": "Delhi" },
    { "id": "3", "name": "Bengaluru", "state": "Karnataka" },
    { "id": "4", "name": "Ahmedabad", "state": "Gujarat" },
    { "id": "5", "name": "Hyderabad", "state": "Telangana" },
    { "id": "6", "name": "Chennai", "state": "Tamil Nadu" }
]

mycomponent.html

<div class="search-container">
    <h2>Find Location</h2>
    <input #searchBoxL id="search-box-loc" (input)="searchForLocation(searchBoxL.value)" [(ngModel)]="selectedResultfilocation"
        placeholder="city, province or region" />
    <button (click)="searchJobMethod()"><i class="fa fa-search"></i></button>
    <ul class="search-result">
        <li *ngFor="let loc of searchFindLoopForLocation">
            <a (click)="searchBoxL.value = loc;selectedResultfilocation = loc;">{{ loc }}</a>
        </li>
    </ul>
</div>

mycomponent.ts

selectedResultfilocation: string;
SearchResultResponseForlocation;
searchFindLoopForLocation;
searchForLocation(term: string): void {
    this.searchResultMethodForLocation(term);
}
searchResultMethodForLocation(fl: string){
    this.http.get('/assets/js/cities.json' + term).pipe(
    ).subscribe(
        data => {
            this.SearchResultResponseForlocation = data.json();
            console.log(this.SearchResultResponseForlocation[0].name);
            this.searchFindLoopForLocation =
                this.SearchResultResponseForlocation;
        },
        error => {
            console.log("Error in recieving data");
        },
        () => {
            console.log(this.SearchResultResponse);
        }
    );
}

我的问题是如何从Angular 6中的给定JSON结构中过滤名称。当我输入位置名称时，我能够获得所有有关名称的建议。请帮我怎么做，我是角度6的新手。

Answer 1

您可以尝试一下，让我知道...一个简单的堆叠闪电战在这里会很有帮助

dwh_cur.fetchone()[0]

Answer 2

如果我的问题是对的，您不需要特定于角度的内容；您始终可以按照以下方式在javaScript中过滤JSON-

<DIV id=divTop1 class=clMain style="CLIP: rect(0px 126px 20px 0px); HEIGHT: 20px; WIDTH: 126px; LEFT: 80px; TOP: 39px; VISIBILITY: visible; BACKGROUND-COLOR: #cccccc">IMPORT</DIV>



<DIV id=divSub0 class=clSubs style="LEFT: 80px; TOP: 0px; VISIBILITY: visible; BACKGROUND-COLOR: #cccccc"><SPAN class=clSub style="COLOR: white">Static Data&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;»</SPAN></DIV>


<DIV id=divSub2_0 class=clSubs2 style="LEFT: 239px; TOP: 8px; VISIBILITY: visible; BACKGROUND-COLOR: #cccccc"><SPAN class=clSub2 style="COLOR: white">ISIN</SPAN></DIV>

如果您需要与实施相关的帮助，请参考以下内容-

var data = [
    { "id": "1", "name": "Mumbai", "state": "Maharashtra" },
    { "id": "2", "name": "Delhi", "state": "Delhi" },
    { "id": "3", "name": "Bengaluru", "state": "Karnataka" },
    { "id": "4", "name": "Ahmedabad", "state": "Gujarat" },
    { "id": "5", "name": "Hyderabad", "state": "Telangana" },
    { "id": "6", "name": "Chennai", "state": "Tamil Nadu" }
];

var newData = filterData('Mumbai');

function filterData(locationName) {
	return data.filter(object => {
		return object['name'] == locationName;
	});
}

console.log(newData);

Answer 3

按名称过滤的示例

HTML -

<input type="text" [ngModel]="filterBy" (ngModelChange)="filter($event)" />

在组件类-

filterBy: string = "";

filter(value) {
    this.filterBy = value;
    this.searchFindLoopForLocation = this.searchFindLoopForLocation.filter(obj => obj.name == value);
}

Answer 4

Ts文件：

   filterSearching() {
    this.userList = this.userList.filter(obj => (obj['id'] == this.locationName)|| 
    (obj['email'] == this.locationName) ||(obj['phone_no'] == this.locationName) || 
    (obj['first_name'] == this.locationName) || (obj['last_name'] == this.locationName));  
   }

在modelChange（）函数中再次调用原始列表。因此，当搜索新值时，将显示原始数据表，然后单击“搜索”。 HTML：

               <div class="col-sm-6 row">
                    <input type="text" [(ngModel)]="locationName" 
                                 (ngModelChange)="modelChange()" />
                    <button (click)="filterSearching()" >Search</button>
                </div>