creating a table with third party api using veto on wix

Question

I am fetching a data from a website and trying to populate the table with it but a cannot manage to do it. it throws an error says "undefined is not an object (evaluating 'Object.keys(firstItem)')"

here is my data fetcher backend code;

import {fetch} from 'wix-fetch';
import {preciousMetalModel} from "backend/model"

const url = "url"

export const getPriceData = async () => {
    const response = await fetch(url, {
        'method': 'get',
        'headers': {
        'key': 'value'
        },
    });
    const priceList = await response.json();
    return priceList.data
}

export const createNewDataFromOriginal = async () => {
    const priceList = await getPriceData()
    const newPriceArray = []
    newPriceArray.push(priceList.ALTIN)
    newPriceArray.push(priceList.ONS)
    newPriceArray.push(priceList.AYAR22)
    newPriceArray.push(priceList.KULCEALTIN)
    newPriceArray.push(priceList.CEYREK_YENI)
    newPriceArray.push(priceList.CEYREK_ESKI)
    newPriceArray.push(priceList.YARIM_YENI)
    newPriceArray.push(priceList.YARIM_ESKI)
    newPriceArray.push(priceList.TEK_YENI)
    newPriceArray.push(priceList.TEK_ESKI)
    newPriceArray.push(priceList.ATA_YENI)

    return newPriceArray
}

and here is my mainPage frontend code;

import { createNewDataFromOriginal } from "backend/HTTP"

$w.onReady(function () {
    createPricesWithId()
    populateTable()
});
const createPricesWithId = async () => {
    const rawPrices = await createNewDataFromOriginal()
    const prices = rawPrices.map((item) => item = { ...item, _id: item.code })

    return prices
}
async function populateTable(params) {
    const tableData = createPricesWithId()
    const firstItem = tableData[0]
    const fields = Object.keys(firstItem)
    const columns = fields.map((field) => ({
        id: field,
        dataPath : field,
        label : field,
        width: 100,
        visible : true,
    }))

    $w('#table1').columns = columns
}

and lastly here is one of the datas;

{
  "code": "ALTIN",
  "alis": "3056.600",
  "satis": "3074.900",
  "tarih": "06-10-2024 12:00:02",
  "dir": {
    "alis_dir": "",
    "satis_dir": ""
  },
  "dusuk": "3074.900",
  "yuksek": "3074.900",
  "kapanis": "2805.840"
}

I tried to populate the table with the code above and it did not work.

Answer 1

Looks like you wrote all the code to set up your table and its columns, but forgot to actually populate the data. In order to do that, you probably want to use the rows property.

Something like:

$w('#table1').row = tableData

And while you're at it, you can delete this line that doesn't actually do anything:

const firstItem = tableData[0]