이오니아 응용 프로그램의 끝점에서 실시간 JSON을 얻는 방법

Question

url의 내용에 따라/assets/data 아래에 저장된 JSON 파일을 사용하여 동적 메뉴 항목을 구현합니다. 메뉴는 저장된 JSON 파일과 잘 작동합니다. 이제 Salesforce API에서 실시간으로 동일한 형식의 JSON을 동적으로 검색하고 콘텐츠를 표시해야합니다. 누군가 내가 여기서해야 할 변경 사항을 제안 할 수 있습니까? getMainMenu() 메서드의 json 경로를 실제 Saleforce API로 대체해야합니까? 다음은

는 데이터 service.ts

import { Injectable } from '@angular/core'; 
 
import { Http, Response } from '@angular/http'; 
 
import 'rxjs/add/operator/map'; 
 

 
/* 
 
    Generated class for the DataServiceProvider provider. 
 

 
    See https://angular.io/guide/dependency-injection for more info on providers 
 
    and Angular DI. 
 
*/ 
 
@Injectable() 
 
export class DataServiceProvider { 
 

 
    constructor(public http: Http) { 
 
    console.log('Hello DataServiceProvider Provider'); 
 
    } 
 

 
    getMainMenu(){ 
 
    return this.http.get('assets/data/mainmenu.json') 
 
    .map((response:Response)=>response.json().Categories); 
 
    } 
 

 
}

하고 당신이 필요로하는 것처럼 보이는

import { Component, ViewChild } from '@angular/core'; 
 
import { Nav, Platform } from 'ionic-angular'; 
 
import { StatusBar } from '@ionic-native/status-bar'; 
 
import { SplashScreen } from '@ionic-native/splash-screen'; 
 

 
import { HomePage } from '../pages/home/home'; 
 
import { ListPage } from '../pages/list/list'; 
 

 
import { DataServiceProvider } from '../providers/data-service/data-service' 
 

 
@Component({ 
 
    templateUrl: 'app.html' 
 
}) 
 
export class MyApp { 
 
    @ViewChild(Nav) nav: Nav; 
 

 
    rootPage: any = HomePage; 
 

 
    pages: any[]; //Array<{title: string, component: any}>; 
 
    mainmenu: any[]; 
 
    
 
    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public dataService: DataServiceProvider) { 
 
    this.initializeApp(); 
 

 
    this.dataService.getMainMenu().subscribe((Response)=>{ 
 
     this.mainmenu = Response; 
 
     console.log(this.mainmenu); 
 
    }); 
 

 
    // used for an example of ngFor and navigation 
 
    this.pages = [ 
 
     { title: 'Home', component: HomePage }, 
 
     { title: 'List', component: ListPage } 
 
    ]; 
 

 
    } 
 

 
    initializeApp() { 
 
    this.platform.ready().then(() => { 
 
     // Okay, so the platform is ready and our plugins are available. 
 
     // Here you can do any higher level native things you might need. 
 
     this.statusBar.styleDefault(); 
 
     this.splashScreen.hide(); 
 
    }); 
 
    } 
 

 
    openPage(page) { 
 
    // Reset the content nav to have just this page 
 
    // we wouldn't want the back button to show in this scenario 
 
    this.nav.setRoot(page.component); 
 
    } 
 

 
    toggleSection(i) { 
 
    this.mainmenu[i].open = !this.mainmenu[i].open; 
 
    }; 
 

 
    toggleItem(i,j) { 
 
    this.mainmenu[i].SubCategories[j].open = !this.mainmenu[i].SubCategories[j].open; 
 
    }; 
 
}

Answer 1

app.component.ts ~에 getMainMenu 메소드의 url을 api의 URL로 보내주십시오. 인증 헤더 추가와 같은 몇 가지 다른 변경이 필요할 수 있지만 API에서 오는 데이터가 assets 폴더에 저장된 것과 동일한 경우 구성 요소는 데이터의 출처를 신경 쓰지 않아야합니다. .