Question

我如何将 JSON 文件中的值传递给 const？

2021-09-28

1604

javascript arrays json

我目前正在开展一个项目，我需要从 JSON 文件中获取数据，以便在 API 的获取中使用该数据（这可行），我需要从 JSON 文件中获取的数据是 latjson 和 lonjson ，并将它们放入 const lat: info.latjson 和 const lon: info.latjson 中，我尝试了这个，我的错误是 Uncaught (in promise) TypeError: Cannot read property 'lat' of undefined （在“const: base....”行中）

这是我的 JSON 文件：

[
    {   
        "latjson": 21.1524,
        "lonjson": -101.7108
    },
    {
        "latjson": 21.1447,
        "lonjson":-101.6852
    }, 
    {
        "latjson": 21.1155,
        "lonjson": -101.6575
    }
]

这是我的脚本

function calcWeather(){ 
    let info  = ''

    fetch('../js/data.json') // fetch editable c:
    .then(function(response) {
        return response.json();
     })
    .then(function(myJson) {
        info = myJson
        console.log(info)
    });
     

    const lat = info.latjson;
    const long = info.lonjson;

    const base = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${api_key}&units=metric&lang=sp`;
}

Answer 1

Fetch 异步运行，因此当您访问“info.latjson”时，不能保证 fetch 已经运行并将结果 JSON 分配给您的“info”对象。

将 fetch 下方的代码移到第二个回调中，或者使用 async await：

async function calcWeather(){ 
    const response = await fetch('../js/data.json');
    const info = await response.json();     

    const lat = info.latjson;
    const long = info.lonjson;

    const base = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${api_key}&units=metric&lang=sp`;
}

Answer 2

您犯了 2 个错误，

您在异步进程之外读取了值
您读取的是数组值，而不是对象

这可能对您有帮助

async function calcWeather(){ 

  const info = await fetch('../js/data.json') // fetch editable c:
  .then(function(response) {
      return response.json();
   });
 
  // Here's is simple way to access index 0
  const lat = info[0].latjson;
  const long = info[0].lonjson;

  const base = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${api_key}&units=metric&lang=sp`;
}

Answer 3

您需要将纬度和经度的值存储在数组中。

const lat = info.map((obj) => { return obj.latjson; });

const lon = info.map((obj) => { return obj.lonjson; });