salesforce lwc datatable - open api

Viewed 11

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.

enter image description here

 @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>
0 Answers
Related