Wix中用第三方API填充表格报错：undefined is not an object

问题背景 #

尝试从外部接口获取贵金属价格数据并填充Wix表格时，出现报错：undefined is not an object (evaluating 'Object.keys(firstItem)')。相关代码及单条数据结构如下：

后端数据获取代码 #

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
}

前端页面代码 #

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
}

单条数据结构 #

{
  "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"
}

错误原因分析 #

1. 异步处理缺失：populateTable中调用createPricesWithId()未加await，导致tableData是Promise对象而非实际数据数组，tableData[0]为undefined，触发Object.keys(undefined)错误。
2. 执行顺序混乱：$w.onReady中同时触发两个异步函数，无法保证数据准备完成后再执行表格填充。
3. 嵌套对象不兼容：数据中的dir是嵌套对象，Wix表格无法直接渲染该类型字段，后续会引发新问题。

修复方案 #

1. 修正前端异步逻辑 #

调整代码确保等待数据加载完成后再处理表格，同时处理嵌套字段：

import { createNewDataFromOriginal } from "backend/HTTP"

$w.onReady(async function () {
    await populateTable();
});

const createPricesWithId = async () => {
    const rawPrices = await createNewDataFromOriginal()
    // 过滤无效数据
    const validPrices = rawPrices.filter(item => item !== undefined);
    // 展开嵌套字段并转换为扁平结构
    const prices = validPrices.map((item) => ({
        ...item,
        _id: item.code,
        alis_dir: item.dir?.alis_dir || '',
        satis_dir: item.dir?.satis_dir || ''
    }));
    // 删除原嵌套字段
    return prices.map(item => {
        const { dir, ...rest } = item;
        return rest;
    });
}

async function populateTable() {
    const tableData = await createPricesWithId();
    // 空数据判断
    if (tableData.length === 0) {
        console.log("无可用数据");
        return;
    }
    const firstItem = tableData[0];
    const fields = Object.keys(firstItem);
    const columns = fields.map((field) => ({
        id: field,
        dataPath: field,
        label: field.toUpperCase(),
        width: 100,
        visible: true,
    }));

    $w('#table1').columns = columns;
    // 设置表格数据源
    $w('#table1').rows = tableData;
}

2. 后端代码增强（可选） #

添加属性存在性检查，避免推入undefined数据：

export const createNewDataFromOriginal = async () => {
    const priceList = await getPriceData()
    const newPriceArray = []
    // 仅当属性存在时推入数组
    priceList.ALTIN && newPriceArray.push(priceList.ALTIN)
    priceList.ONS && newPriceArray.push(priceList.ONS)
    priceList.AYAR22 && newPriceArray.push(priceList.AYAR22)
    priceList.KULCEALTIN && newPriceArray.push(priceList.KULCEALTIN)
    priceList.CEYREK_YENI && newPriceArray.push(priceList.CEYREK_YENI)
    priceList.CEYREK_ESKI && newPriceArray.push(priceList.CEYREK_ESKI)
    priceList.YARIM_YENI && newPriceArray.push(priceList.YARIM_YENI)
    priceList.YARIM_ESKI && newPriceArray.push(priceList.YARIM_ESKI)
    priceList.TEK_YENI && newPriceArray.push(priceList.TEK_YENI)
    priceList.TEK_ESKI && newPriceArray.push(priceList.TEK_ESKI)
    priceList.ATA_YENI && newPriceArray.push(priceList.ATA_YENI)

    return newPriceArray
}

关键修复点总结 #

• 异步函数调用必须加await，确保获取实际数据而非Promise对象。
• 调整执行顺序，保证数据加载完成后再初始化表格。
• 将嵌套对象转换为表格可渲染的扁平字段。
• 添加数据有效性检查，过滤空值避免后续错误。

内容的提问来源于stack exchange，提问作者Muhammet Taha GENÇ