I was practicing while making a data table using this data https://api.nobelprize.org/v1/laureate.json?affiliation=Stanford%20University However, since the Prizes part is an array, a value is displayed in the blank. I would like to ask how to deal with this situation.
@track columns = [
{ label: 'born', fieldName: 'born' ,sortable: true},
{ label: 'bornCity', fieldName: 'bornCity'},
{ label: 'bornCountry', fieldName: 'bornCountry'},
{ label: 'bcCode', fieldName: 'bornCountryCode'},
{ label: 'died', fieldName: 'died'},
{ label: 'diedCity', fieldName: 'diedCity'},
{ label: 'diedCountry', fieldName: 'diedCountry'},
{ label: 'dcCode', fieldName: 'diedCountryCode'},
{ label: 'firstname', fieldName: 'firstname'},
{ label: 'gender', fieldName: 'gender'},
{ label: 'id', fieldName: 'id',sortable: true},
{ label: 'prizes', fieldName: 'motivation'},
{ label: 'surname', fieldName: 'surname'}
];
retriveNobel(){
retriveNobelData()
.then(response =>{
this.NobelData = response.laureates;
console.log('NobelData',response.laureates);
console.log('response',response.laureates)
console.log(flat(this.NobelData, {}));
let {prizes} = this.NobelData;
console.log('prizes',prizes);
this.tempList = prizes;
console.log(this.tempList)
}).catch(error=>{
console.error(error);
})
}
<template>
<lightning-card class="slds-card__header slds-grid" icon-name="custom:custom55" title="Stanford University 에서 근무한 모든 노벨상 수상자">
<div style="height: 500px;">
<template if:true={NobelData}>
<lightning-datatable key-field="id" data={NobelData} columns={columns}
hide-checkbox-column default-sort-direction={defaultSortDirection}
sorted-direction={sortDirection} sorted-by={sortedBy} onsort={onHandleSort}>
</lightning-datatable>
</template>
</div>
</lightning-card>