Angular2 मानचित्रण नेस्टेड JSON सारणी मॉडल करने के लिए

Question

मैं नेस्टेड JSON सारणी जो Angular2 में अपने मॉडल सरणी के लिए वेब से प्रतिक्रिया है मैप करने के लिए सक्षम नहीं हूँ। मान लीजिए मैं नीचे के रूप में JSON सारणी प्रतिक्रिया:

[{ 
    "base_url": "http://mysearch.net:8080/", 
    "date": "2016-11-09", 
    "lname": "MY PROJ", 
    "name": "HELLO", 
    "description": "The Test Project", 
    "id": 10886789, 
    "creationDate": null, 
    "version": "2.9", 
    "metrics": [{ 
     "val": 11926.0, 
     "frmt_val": "11,926", 
     "key": "lines" 
    }, 
    { 
     "val": 7893.0, 
     "frmt_val": "7,893", 
     "key": "ncloc" 
    }], 
    "key": "FFDFGDGDG" 
}] 

मैं मैन्युअल रूप से अपने मॉडल के लिए लिंक Angular 2 observable doesn't 'map' to model चर्चा करते हुए क्षेत्रों को मैप करने के कोशिश कर रहा था और ngFor के माध्यम से पुनरावृत्ति के आधार पर अपने HTML में उन प्रदर्शित करने के लिए कर रहा था ..... लेकिन मैं एचटीएमएल में एनक्लोक और लाइन वैल्यू भी प्रदर्शित करना चाहता हूं लेकिन मुझे यकीन नहीं है कि उपरोक्त लिंक में उल्लिखित मॉडल मॉडल में उन मानों को कैसे मैप करना है। क्या आप कृपया इसके साथ मेरी मदद कर सकते हैं?

धन्यवाद।

संपादित

मोड वर्ग

export class DeiInstance { 
    base_url: string; 
    date: string; 
    lname : string; 
    name : string; 
    id : number; 
    key:string; 

    constructor(obj: DeiInstance) { 
     this.sonar_url = obj['base_url']; 
     this.lname = obj['lname']; 
     this.name = obj['name']; 
     this.id = obj['id']; 
     this.key = obj['key']; 
     this.date = obj['date']; 
    } 

    // New static method. 
    static fromJSONArray(array: Array<DeiInstance>): DeiInstance[] { 
     return array.map(obj => new DeiInstance(obj)); 
    } 
} 

Answer 1

आप अपने मॉडल को आसान बनाने में कर सकते हैं और अपने एक बहुत मानचित्रण। आपको अपने एपीआई प्रतिक्रिया मैन्युअल रूप से मैप करने की आवश्यकता नहीं है। जावास्क्रिप्ट/टाइपस्क्रिप्ट आपके लिए यह कर सकता है।

सबसे पहले आप एक से अधिक इंटरफेस की जरूरत है। DeiInstance प्रकार के लिए अपने एपीआई प्रतिक्रिया कास्ट करने के लिए टाइपप्रति की "ऑपरेटर" -

export interface DeiInstance { 
    base_url: string; 
    date: string; 
    lname: string; 
    name: string; 
    description: string; 
    id: number; 
    creationDate: string; //probably date 
    version: string 
    metrics: Metric[]; 
    key: string; 
} 

export interface Metric { 
     val: decimal; 
     frmt_val: decimal; 
     key: string; 
} 

फिर आप as उपयोग कर सकते हैं।

sealSearch(term: string): Observable<DeiInstance[]> { 
     return this.http.get(this.sealUrl + term) 
      .map(response => response.json() as DeiInstance[]) 
      .catch(this.handleError); 
} 

आप वर्गों के बजाय इंटरफेस का उपयोग करते हैं तो आप भी लाभ आप कम उत्पादन कोड जो ग्राहक ब्राउज़र को sended किया जाएगा कि है। इंटरफ़ेस केवल पूर्व-संकलन-समय के लिए है या फिर आप इसे कॉल करना चाहते हैं।

मेरे कोड काम करता है आशा है कि और यह आपकी समस्या नहीं सुलझती।