how to read data from json instead of array using ng2-dnd package?

Im using ng2-dnd package, simple html5 package to do drag-and-drop on a list to sort it, but I could only figure out how to populate the list from an array and I need it from json, this is my code:

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

if someone knows how can I use it to get the data from json of reports instead of array of reports it will really help me :)

thanks!!