ng2-dndパッケージを使用して配列の代わりにjsonからデータを読み取る方法は？

Question

Im ng2-dndパッケージを使用して、簡単なhtml5パッケージを使用してリストをドラッグ＆ドロップすると、並べ替えることができます。

配列からリストを取り込む方法を知ることができただけで、JSONから必要なものです。

これは私のコードです：

import { Component } from '@angular/core'; 

import { DND_DIRECTIVES } from 'ng2-dnd/ng2-dnd'; 

import { Report } from "./Report"; 

@Component({ 
    selector: 'my-app', 
    styleUrls: ['style.css'], 
    directives: [DND_DIRECTIVES], 
    template: ` 
    <h1 align="center">{{title}}</h1> 
    <h2>list of reports:</h2> 
    <div dnd-sortable-container [sortableData]="reports"> 
    <div *ngFor="let rep of reports; let i=index" dnd-sortable [sortableIndex]="i"> 
    ID:{{rep.id}} <p></p> Name:{{rep.name}} 
    </div> 
    <div>{{reports | json}}</div> 
    ` 
}) 

export class AppComponent { 

    title = 'Reorder List'; 

    reports = [ 
     new Report(1, 'Italy'), 
     new Report(2, 'Spain'), 
     new Report(3, 'Italy'), 
     new Report(4, 'Spain'), 
     new Report(5, 'Netherlands'), 
     new Report(6, 'Italy') 
    ]; 
} 

誰かが私ではなく、レポートの列のレポートのJSONからデータを取得するためにそれを使用する方法を知っている場合、それは本当に私を助ける:)

感謝!!

Answer 1

はあなた返されたデータは、JSONの配列である、あなたはこのようReport`の配列を返すために、マップ機能を使用することができることを仮定します

var data = [{id: 1 , name:"Italy"}, {id: 2 , name:"Viet Nam"}]; 
var reports =  data.map(x=> new Report(x.id, x.name));