IONIC 2: поиск с разбором json - PullRequest
Новая
       7

IONIC 2: поиск с разбором json

1 голос
/ 12 марта 2019

У меня есть две страницы, страница поиска, которая содержит некоторые фильтры поиска, такие как семейное положение, возраст и т. Д., И эти фильтры в виде комбинированного списка, во-первых, я хочу отобразить каждую опцию в поле со списком, чтобы получить из json. и у меня есть другая страница, называемая совпадениями, с карточкой, содержащей информацию о человеке Поэтому я хочу сохранить некоторые данные о людях как JSON. И когда я выполняю поиск с определенными фильтрами, мне нужно отображать результаты в совпадениях как карточку, извлекая из json. Пожалуйста, помогите.

поиск страницы ts и html: 

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { MatriregPage } from '../matrireg/matrireg';
import { MatrimatPage } from '../matrimat/matrimat';

@Component({
    selector: 'page-matrisear',
    templateUrl: 'matrisear.html',
    
    providers: [ObsAuthService]
})
export class MatrisearPage{

    maritalfilter=[
        {
            "marital":"Single"

            },
            {
                "marital":"Divorced"
            },
            {
                "marital":"Widowed"
            }
    ];

    religionfilter=[
        {
            "religion":"Any"
        },
        {
            "religion":"Hindu"
        },
        {
            "religion":"Muslim"
        },
        {
            "religion":"Christian"
        }
    ];

    selectedMarital:string;
    selectedReligion:string;
    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController) {
        }

    selectChange(e) {
        console.log(e);
    } 
    public create(){
        this.nav.push(MatriregPage);
    } 
    public search(){
        this.nav.push(MatrimatPage);
    }    
}
<ion-header>
    <ion-navbar>
        <ion-title>Search</ion-title>
    </ion-navbar>

</ion-header>
<ion-content>
    <ion-label class="link" (click)="create()">Create a Profile</ion-label>

    <ion-row>
        <ion-col>
            <ion-label>Age:</ion-label>
        </ion-col>
        <ion-col>
            <ion-select [(ngModel)]="selectedAge" interface="popover" placeholder="Select">
                <ion-option *ngFor="let ageObj of agefilter" [value]="ageObj">{{ageObj.age}}</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-label>to</ion-label>
        </ion-col>
        <ion-col>
            <ion-select [(ngModel)]="selectedAge" interface="popover" placeholder="Select">
                <ion-option *ngFor="let ageObj of agefilter" [value]="ageObj">{{ageObj.age}}</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-label>Height:</ion-label>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Select">
                <ion-option value="nes">4ft 8in</ion-option>
                <ion-option value="n64">4ft 9in</ion-option>
                <ion-option value="ps">5ft</ion-option>
                <ion-option value="genesis">5ft 1in</ion-option>
                <ion-option value="saturn">5ft 2in</ion-option>

            </ion-select>
        </ion-col>
        <ion-col>
            <ion-label>to</ion-label>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Select">
                <ion-option value="nes">4ft 8in</ion-option>
                <ion-option value="n64">4ft 9in</ion-option>
                <ion-option value="ps">5ft</ion-option>
                <ion-option value="genesis">5ft 1in</ion-option>
                <ion-option value="saturn">5ft 2in</ion-option>

            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-label>Marital Status:</ion-label>
        </ion-col>
        <ion-col>
            <ion-select [(ngModel)]="selectedMarital" interface="popover" placeholder="Select">
                <ion-option *ngFor="let maritalObj of maritalfilter" [value]="maritalObj">{{maritalObj.marital}}</ion-option>


            </ion-select>
        </ion-col>
        <ion-col>
            <ion-label>Religion</ion-label>
        </ion-col>
        <ion-col>
            <ion-select [(ngModel)]="selectedReligion" interface="popover" placeholder="Select">
                <ion-option *ngFor="let religionObj of religionfilter" [value]="religionObj">{{religionObj.religion}}</ion-option>

            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-label>Mother Toungue</ion-label>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Select">
                <ion-option value="ns">Any</ion-option>
                <ion-option value="nes">Hindi</ion-option>
                <ion-option value="n64">Tamil</ion-option>
                <ion-option value="ps">Malayalam</ion-option>
                <ion-option value="genesis">English</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-label>Country</ion-label>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Select">
                <ion-option value="ns">Any</ion-option>
                <ion-option value="nes">India</ion-option>
                <ion-option value="n64">USA</ion-option>
                <ion-option value="ps">UAE</ion-option>
                <ion-option value="genesis">France</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-label>State</ion-label>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Select">
                <ion-option value="ns">Any</ion-option>
                <ion-option value="nes">Kerala</ion-option>
                <ion-option value="n64">TamilNadu</ion-option>
                <ion-option value="ps">Washington</ion-option>
                <ion-option value="genesis">Paris</ion-option>
            </ion-select>
        </ion-col>


        <ion-col>
            <ion-label>City/District</ion-label>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Select">
                <ion-option value="ns">Any</ion-option>
                <ion-option value="nes">Thrissur</ion-option>
                <ion-option value="n64">Trivandrum</ion-option>
                <ion-option value="ps">North Washington</ion-option>
                <ion-option value="genesis">Georgia</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-label>Education</ion-label>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Select">
                <ion-option value="ns">Any</ion-option>
                <ion-option value="nes">UG</ion-option>
                <ion-option value="n64">PG</ion-option>
                <ion-option value="ps">Ph.D.</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>

    <ion-row>
        <button ion-button (click)="search()" color="primary" block>Search</button>
    </ion-row>
</ion-content>

соответствует страницам html и ts: 

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { MatrisubPage } from '../matrisub/matrisub';
import { MatrirepPage } from '../matrirep/matrirep';

@Component({
    selector: 'page-matrimat',
    templateUrl: 'matrimat.html',
    
    providers: [ObsAuthService]
})
export class MatrimatPage{

    
    
    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController) {
        }

    selectChange(e) {
        console.log(e);
    } 
   
    goback() {
             this.nav.pop();
    }

    public report(){
        this.nav.push(MatrirepPage);
    }
}
<ion-header>
    <ion-navbar>
        <ion-title>Matches</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-card>
        <ion-card-content>
            <ion-label>Name:</ion-label>
            <ion-row>
                <ion-col col-2>
                    <img src="assets/images/users.png" />
                </ion-col>
                <ion-col>
                    <ion-row>
                        <ion-label>Age:</ion-label>
                    </ion-row>
                    <ion-row>
                        <ion-label>Religion:</ion-label>
                    </ion-row>
                    <ion-row>
                        <ion-label>Marital Status:</ion-label>
                    </ion-row>
                    <ion-row>
                        <ion-label>Location:</ion-label>
                    </ion-row>
                    <ion-row>
                        <ion-label>Education:</ion-label>
                    </ion-row>
                    <ion-row>
                        <ion-label>Profession:</ion-label>
                    </ion-row>
                    <ion-row>
                        <ion-label>Annual Income:</ion-label>
                    </ion-row>
                </ion-col>
                <ion-col>
                    <ion-label item-end>Height:</ion-label>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <button ion-button full color="secondary" block>View Profile</button>
                </ion-col>
                <ion-col>
                    <button ion-button (click)="report()" full color="primary" block>Report</button>
                </ion-col>
            </ion-row>
        </ion-card-content>
    </ion-card>
</ion-content>
...