角度4抓取嵌套json

如何訪問嵌套json？我有以下文件：角度4抓取嵌套json

{ 
    "user1": { 
     "name": "john", 
     "surname": "johnsson" 
    }, 
    "user2": { 
     "name": "Jacob", 
     "surname": "Jacobsson" 
    } 
}

等等。我需要從這個JSON數據中使用字段名稱和姓氏來創建一個表。我怎樣才能做到這一點？我寫了下面的代碼： users.service.ts

export class UsersService { 
    private _url: string = '../assets/users.json'; 

    constructor(private _http: Http) { 
    } 

    getUsers() { 
     return this._http.get(this._url).map((response: Response) => 
      response.json()); 
    } 
}

和users.component

export class UsersComponent implements OnInit { 
    users = []; 

    constructor(private _usersService: UsersService) { 
    } 

    ngOnInit() { 
     this._usersService.getUsers().subscribe(resUsersData => this.users = resUsersData); 
     console.log(this.users); 
    } 
}

然後，我只是想在users.component.html使用{{users}}看到我的結果，但我看到只是[object Object]。所以我顯然無法訪問其他任何東西並獲取錯誤。

來源

2017-07-10 Kirill

你不能訪問它是不可訪問的。 –

嘗試使用json管道輸出它，'users |管' – TheUnreal

你想要做的第一件事就是壓扁你的JSON數據文件：

[{ 
    "name": "John", 
    "surname": "Johnsson" 
}, { 
    "name": "Jacob", 
    "surname": "Jacobsson" 
}]

您已命名文件users.json，因此您已經描述過它將包含一個用戶對象數組s，這意味着不需要在文件（user1，user2）中再次攜帶該級別的層次結構，事實上這使得它們更難以實現。您的users文件應該是一個單一級別的對象數組，每個對象具有name和surname屬性。

另請注意，整個JSON塊被封裝爲數組[[}]。

其次，你的服務：

export class UsersService { 
    private _url: string = '../assets/users.json'; 

    constructor(private _http: Http) { 
    } 

    getUsers(): Observable<Response> { 
     return this._http.get(this._url) 
       .map(response => response.json()) 
    } 
}

我要確保我型我所能，因爲它使閱讀預計什麼類型的代碼時，與IDE可以捕捉類型不匹配適合你，更清晰這使調試更容易。

則組件：

export class UsersComponent implements OnInit { 
users: any; 

constructor(private _usersService: UsersService) { 
} 

    ngOnInit() { 
     this._usersService.getUsers() 
      .subscribe(response => { 
       this.users = response; 
       console.log('Returned Users:', this.users); 
     }); 
    }

如果訂閱之外你console.log this.users，然後控制檯聲明服務之前將執行已經解決了數據，你會得到「未定義」，甚至雖然數據已經回來，但它在註銷之後才分配給您的變量。始終，通過訂閱，將您的數據註銷到.subscribe區塊。

現在你應該有什麼this.users其中包含2個用戶對象，每個數組的名稱和姓屬性，你可以遍歷這些模板與*ngFor

<ul> 
    <li *ngFor="let user of users">{{user.name}}, {{user.surname}}</li> 
    </ul>

來源

2017-07-11 03:59:07

謝謝你，這是非常有用的，一切正常。但是我有一個我所描述的結構的文件，它是嵌套的。我怎麼能做同樣的事情，但與原始的json文件？ – Kirill

您的文件是否使用此代碼加載並現在註銷到控制檯？如果是這樣，我會在喚醒時重寫現有文件並將其轉換爲此格式以便可用。 –

是的，它的確如此！謝謝 – Kirill

你的回答是一個對象，不是一個數組。您將需要將您的響應轉換爲數組，然後您可以在您的html表中使用*ngFor。

您可以使用Object.keys來遍歷鍵。使用.map()返回一個數組。現在

ngOnInit() { 
    this._usersService.getUsers().subscribe(
     resUsersData => 
      //resUsersData is an Object, not an array. Transform it. 
      this.users = Object.keys(resUsersData).map(key => resUsersData[key]) 
    ); 
    console.log(this.users); 
}

您可以在表中的*ngFor使用{{users}}。

來源

2017-07-11 02:44:27 CozyAzure

這個解決方案真棒。它幫助我消除一個層次。我應該怎麼做才能達到比這更深的水平？ – Auguste

@Auguste在你的地圖上再次做一個'Object.keys'。或者，你可以使用'.reduce' – CozyAzure

your data format should be 

    { 
    "user": [{ 
     "name": "john", 
     "surname": "johnsson" 
    },{ 
     "name":"aish", 
     "surname":"johnshon" 
     }] 
}

那麼你可以使用的foreach訪問所有結果

來源

2017-07-11 02:53:03

{ 
    "users": [{ 
     "name": "john", 
     "surname": "johnsson" 
    },{ 
      "name": "Jacob", 
     "surname": "Jacobsson" 
     }], 
}

，那麼你可以訪問

來源

2017-07-11 02:56:43

角度4抓取嵌套json

回答

相關問題