Javascript reduce in other function

Question

How can I get the data I parse from my JSON file to run through the reduce function to eliminate duplicates and then beeing available by calling the getFiilteredData() function?

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?
          });
        });
      }

Doing it like this, results in "Uncaught TypeError: Cannot read property '0' of undefined" for the two last console.log() but the first works fine and logs the expected value.

its just a nsWebViewInterface, since this is code from a NativeScript Mobile Application — CRoNiC, Oct 02 '20 at 09:33

Jamiec · Accepted Answer · 2020-10-02T10:49:35.793

1

The easiest way is to use a Promise and async/await. Wrap your asynchronous call in a Promise and await it at the client:

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
        });
    });
}

and then when you call it just await the call

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

Edit: I notice from your comments that in your code you're calling getFilteredData twice - this seems like a bad idea. Call it once. If you put the configuration of your chart into its own async method this gets easier

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
};

edited Oct 02 '20 at 10:49

answered Oct 02 '20 at 09:38

Jamiec

118,012
12
125
175

I tried your solution, but I can't make a top level await... "Uncaught SyntaxError: await is only valid in async function" – CRoNiC Oct 02 '20 at 09:58
@CRoNiC you just need to make that top level function `async` too – Jamiec Oct 02 '20 at 10:29
I tried to do it, but since I still encounter some problems I can't resolve, maybe you have the time to take a look at the full code: https://www.codepile.net/pile/Z5wZpQ3O – CRoNiC Oct 02 '20 at 10:36
your code worked but I need your help once more, since I realised that I don't understand your code fully... I need to return more data than before - see updated code. – CRoNiC Oct 05 '20 at 11:56
thought I can solve it by myself after writing the comment, but I didn't manage to do so – CRoNiC Oct 05 '20 at 12:07
basicly I want to return more then just `monitorData` but I don't know whats the best way to do so, since `.resolve()`can only resolve one argument right? – CRoNiC Oct 05 '20 at 12:08
return/resolve an object `resolve({monitorData:monitorData, myOtherData:"Hello, World"});` – Jamiec Oct 05 '20 at 12:10
if possible could you please explain the code with return new Promise((resolve) => {...} resolve(monitorData) I think I lack some understanding of whats really happening there – CRoNiC Oct 05 '20 at 12:11
@CRoNiC See: [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) – Jamiec Oct 05 '20 at 12:12

Javascript reduce in other function

1 Answers1