Can't make table in LWC

Question

I want to make a table like this:

I got the values from the apex in js and it looks like this:

    @track data2 = [];
    @track data = [];
    testClick() {
        
        getExchangeRates({baseCurrency : this.defaultCurrency, dateFrom : this.dateFrom, dateTo : this.dateTo, value : this.defaultValue})
            .then(resultJSON => {
                let result = JSON.parse(resultJSON);
                
                console.log(result);
                console.log('////////');
                console.log(result.rates);

                let recordsByDates = result.rates;
                for (var key in recordsByDates) {
                    console.log(key);
                    let record = {
                        date : key,
                        USD : recordsByDates[key].USD,
                        CAD : recordsByDates[key].CAD,
                        EUR : recordsByDates[key].EUR,
                        GBP : recordsByDates[key].GBP
                    }
                    this.data.push(record);
                    this.data2 = JSON.stringify(this.data);
                }

                console.log(this.data);
                console.log(this.data2);

            })
            .catch(error => {
                this.error = error;
                console.log(error);
            });        
    }

I tried to make a table, but something did not work out for me:

      <template for:each={data2} for:item="dat">
            <tr key={dat} onclick={testClick}>
                <td data-label="data2">
                    {dat.key}
                </td>
                <td data-label="data2">
                    {dat.value}
                </td>
            </tr>
        </template> 

please tell me how to fix this

Answer 1

there are a couple of issues in the code:

1. not referring date value properly
2. should add a unique key, need in for:each

Here is the updated code

for (var key in recordsByDates) {
    let record = {
        key: key,  // index of object can be used 
        date : recordsByDates[key].date,
        USD : recordsByDates[key].USD,
        CAD : recordsByDates[key].CAD,
        EUR : recordsByDates[key].EUR,
        GBP : recordsByDates[key].GBP
    }
}

3. in HTML, you are referring wrong variable, it should data, in place of data2 (which is stringified).
4. no need to have table based tags for this type of structure, you can use div for better control.

in HTML file, it should be something like:

       <template for:each={data} for:item="dat">
            <div key={dat.key} onclick={testClick}>
                <div class="date-wrap">
                    Date: {dat.date}
                </div>
                <div class="value-wrap">
                    USD: {dat.USD}
                </div>
                <div class="value-wrap">
                    CAD: {dat.CAD}
                </div>
                <div class="value-wrap">
                    EUR: {dat.EUR}
                </div>
                <div class="value-wrap">
                    GBP: {dat.GBP}
                </div>
            </div>
        </template> 

Moreover, you can create a nested array of objects inside the data variable which can help to make the structure more generic.