Javascript减少其他功能

Question

如何从我的 JSON 文件中获取我解析的数据以运行 reduce 函数以消除重复项，然后通过调用 getFiilteredData() 函数获得可用的数据？

async function getFilteredData() {
        return new Promise((resolve) => {
          oWebViewInterface.on("loadData", function (data) {
            var schwellWerte = data.monitor;
            var monitorData = data.data.reduce((arr, d) => {
              if (arr.find((i) => i.zeitstempel === d.zeitstempel)) {
                return arr;
              } else {
                return [...arr, d];
              }
            }, []);
            resolve(monitorData); // resolve the promise with the data
            //can I do: resolve(monitorData, schwellWerte) to resolve both?
          });
        });
      }

这样做会导致最后两个 console.log() 出现“Uncaught TypeError: Cannot read property '0' of undefined”，但第一个工作正常并记录预期值。

Answer 1

最简单的方法是使用 Promise 和 async/await。将您的异步调用包装在 Promise 中并在客户端等待它：

async function getFilteredData() {
    return new Promise( resolve => {
        oWebViewInterface.on("loadData", function (data) {
          var monitorData = JSON.parse(data).reduce((arr, d) => {
            if (arr.find((i) => i.zeitstempel === d.zeitstempel)) {
              return arr;
            } else {
              return [...arr, d];
            }
          }, []);
          resolve(monitorData); // resolve the promise with the data
        });
    });
}

然后当您调用它时，只需 await 调用

var filteredData = await getFilteredData();
console.log(filteredData[0].id);

---

编辑：我从您的 cmets 中注意到，您在代码中调用了两次 getFilteredData - 这似乎是个坏主意。调用一次。如果您将图表的配置放入其自己的async 方法中，这将变得更容易

async function configChart(){
      var data = await getFilteredData();
      var werteArr = [];
      var zsArr = [];
      for (i = 0; i < data.length; i++) {
         werteArr.push(data[i].wert);
         zsArr.push(data[i].zeitstempel);
      }
        

      //defining config for chart.js
      var config = {
        type: "line",
        data: {
          labels: zsArr ,
          datasets: {
            data: werteArr,
            // backgroundcolor: rgba(182,192,15,1),
          },
        },
        // -- snip rest of config -- //
     }
     var ctx = document.getElementById("canvas").getContext("2d");
     window.line_chart = new window.Chart(ctx, config);
}

window.onload = function () {
    configChart(); // no need to await this. It'll happen asynchronously
};