javascript - Filter with JSON in angular 6 - Stack Overflow

admin管理员组

文章数量:1287636

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" }
]

myponent.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>

myponent.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);
        }
    );
}

My Question is how to filter the name from the given JSON structure in Angular 6. when I will enter location name I can able to get all the remendations of name. Please help me how to do this, I am totally new in angular 6.

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" }
]

myponent.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>

myponent.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);
        }
    );
}

My Question is how to filter the name from the given JSON structure in Angular 6. when I will enter location name I can able to get all the remendations of name. Please help me how to do this, I am totally new in angular 6.

• javascript
• json
• angular
• typescript

Share Improve this question Follow edited Mar 16, 2022 at 22:18 Akber Iqbal 15k1212 gold badges5353 silver badges7575 bronze badges asked Dec 12, 2018 at 10:34 lpdlpd 41744 gold badges77 silver badges1919 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

If I'm getting your question right, you don't need something angular specific; You can always filter a JSON in javaScript as follows -

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);

If you need help related to implementation, refer the following -

<input #searchBoxL id="search-box-loc" [(ngModel)]="selectedResultfilocation" (ngModelChange)="searchJobMethod()"
    placeholder="city, province or region" />

searchJobMethod() {
    searchFindLoopForLocation = data.filter(object => {
        return object['name'] == selectedResultfilocation;
    });
}

Can you try this and let me know... a simple stackblitz would have helped here greatly

/* define SearchResultResponseForlocation as an array... i have used any but you should define a class for your object as per cities.json*/
SearchResultResponseForlocation:any[];

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

An example to filter by name

HTML -

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

In a ponent class -

filterBy: string = "";

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

Ts File :

   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));  
   }

In the modelChange() function call the original list again . So then When a new value is searched the original data table is showed before clicked Search. Html :

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

本文标签： javascriptFilter with JSON in angular 6Stack Overflow