代码之家 › 专栏 › 技术社区 › Dione Saturn

JSON、fetch、HTML中的javascript和未定义或空字符串[重复]

fetch json html javascript

Dione Saturn · 技术社区 · 6 月前

我在一个论坛上搜索与JSON和fetch函数相关的问题。他们有很多,但我很难理解这一点。我需要的是获取返回的“/api”url:

{"lux": 0, "pressure": 0.0, "TVOC": 0, "temp": 0.0, "hum": 0.0, "AQI": 0, "eCO2": 0}

我想用这些值填充HTML表中的字段。我从HTML代码中的简单内容开始:

<script>
async function get_data() {
  await fetch('/api')
    .then(resolve => resolve.json())
    .then(data => jdata = data);
  return jdata;
}

const JD = () => {
  fetch('/api')
    .then(resolve => resolve.json())
    .then(data => jdata = data);
}

//let raw_data='{"lux":0, "pressure":0, "TVOC":0, "temp":0, "hum":0, "AQI":0, "eCO2":0}';
//jdata=JSON.parse(raw_data);
let raw_data = get_data();
jdata = JSON.parse(raw_data);

console.log(raw_data);
console.log(jdata);
console.log(JD);
console.log(jdata.lux);

document.getElementById("dane_temp").innerHTML = jdata.temp;</script>

当我这样做时,我会出错

未捕获的SyntaxError:JSON.parse:JSON数据第1行第2列出现意外字符线

所以我注释JSON.parse行。问题是 raw_data 是a 承诺对象,我无法正确分配JSON数据 jdata 变量。我通常很难将这些嵌套对象导出到我可以解析的东西中。当我分配字符串时,就像注释掉部分一样,然后我可以执行JSON.parse和所有工作,但raw_data不是一个对象,它只是字符串。但是使用这个异步函数,这就是 raw_data :

Promise { <state>: "pending" }
â
<state>: "fulfilled"
â
<value>: Object { lux: 0, pressure: 0, TVOC: 0, â¦ }
â
<prototype>: Promise.prototype { â¦ }

JD 得到a 功能对象,我看不到其中的任何数据。我在这个论坛上浏览了不同的帖子,由于我通常不使用JS编程,我在理解如何从promise对象中提取字符串方面遇到了问题。你能帮我吗?

1 回复 | 直到 6 月前

Kishore Arul 6 月前

试试这个

<script>
async function get_data() {
    try {
        const response = await fetch('/api');
        const jdata = await response.json();
        return jdata;
    } catch (error) {
        console.error("Error fetching data:", error);
        return null; // Return null if an error occurs
    }
}

// Example of handling the data
async function updateData() {
    const jdata = await get_data(); // Wait for the data to be fetched
    if (jdata) { // Check if the data is successfully fetched
        console.log("Received data:", jdata);
        console.log("Lux value:", jdata.lux);

        // Update DOM elements with received data
        document.getElementById("dane_temp").innerHTML = jdata.temp;
    } else {
        console.error("Failed to fetch or parse data");
    }
}

// Call the updateData function after the DOM is ready
document.addEventListener("DOMContentLoaded", () => {
    updateData();
});
</script>