WIX Velo使用fetch调用接口取JSON值显示undefined问题求助

问题原因 #

你拿到undefined的核心原因是访问JSON的字段路径和接口实际返回的结构不匹配，你直接访问顶层的dato字段，但这个字段不在JSON的根层级。

排查方法 #

你可以先打印完整的接口返回内容确认结构，将第二个then的代码先替换为下面的内容，查看控制台输出的完整JSON结构：

.then( (json) => {
  console.log('完整接口返回：', JSON.stringify(json, null, 2))
})

适配该接口的修正方案 #

你调用的墨西哥银行开放接口的返回结构层级如下：

根节点
└── bmx
    └── series （数组，存放你查询的序列数据）
        └── 序列项
            └── datos （数组，存放对应日期的数据）
                └── 数据项
                    └── dato （你需要的数值字段）

对应的代码修正如下，同时给你加了字段存在性判断避免接口返回异常时报错：

// 先删掉没用的重复导入：import wixFetch from 'wix-fetch';
import {fetch} from 'wix-fetch';

export function button1_click(event) {
  fetch("https://www.banxico.org.mx/SieAPIRest/service/v1/series/SF43787/datos/2020-01-01/2020-01-02?token=81a6706a64a09f9f3d808155ad53195f7db0a1e9826a176e805076353257ba2c", {"method": "get"})
    .then( (httpResponse) => {
      let url = httpResponse.url;
      let statusCode = httpResponse.status;
      let statusText = httpResponse.statusText;
      $w("#input1").value=statusText;
      $w('#input2').value= url;

      if (httpResponse.ok) {
        return httpResponse.json();
      }
      else {
        return Promise.reject("Fetch did not succeed");
      }
    } )
    .then( (json) => {
      // 按接口实际结构访问字段，加校验避免异常
      if(json?.bmx?.series?.length && json.bmx.series[0].datos?.length) {
        const targetValue = json.bmx.series[0].datos[0].dato
        console.log(targetValue);
        $w("#input2").value='JSON PROMISE OK' + targetValue
      } else {
        $w("#input2").value='接口未返回有效数据'
      }
    } )
    .catch( (err) => {
      console.log(err);
      $w("#input2").value='请求出错：' + err
    } );
}

内容的提问来源于stack exchange，提问作者Naiki Marrusky