javascript - 当变量更改时如何更新异步等待函数？

Question

genderPie()

let filter = {};


async function genderPie() {
  const d = await getData();
  const g = await d.reduce((a, o) => (o.GEN && a.push(o.GEN), a), []);
  const gender = Object.keys(g).length;
  const m = await d.reduce((a, o) => (o.GEN == 1 && a.push(o.GEN), a), []);
  const male = Object.keys(m).length;
  const f = await d.reduce((a, o) => (o.GEN == 2 && a.push(o.GEN), a), []);
  const female = Object.keys(f).length;


  var data = [{
    name: 'male',
    y: male,
    id: 1
  }, {
    name: 'female',
    y: female,
    id: 2
  }];

  chart = new Highcharts.Chart({
    plotOptions: {
      pie: {
        innerSize: '80%',
        dataLabels: {
          connectorWidth: 0
        }
      }
    },
    series: [{
      "data": data,
      type: 'pie',
      animation: false,
      point: {
        events: {
          click: function(event) {
            filter.GEN = '' + this.id + '';
          }
        }
      }
    }],
    "chart": {
      "renderTo": "gender"
    },
  });
}

async function getData() {

  buildFilter = (filter) => {
    let query = {};
    for (let keys in filter) {
      if (filter[keys].constructor === Array && filter[keys].length > 0) {
        query[keys] = filter[keys];
      }
    }
    return query;
  }

  //FILTER DATA

  //Returns the filtered data
  filterData = (dataset, query) => {
    const filteredData = dataset.filter((item) => {
      for (let key in query) {
        if (item[key] === undefined || !query[key].includes(item[key])) {
          return false;
        }
      }
      return true;
    });
    return filteredData;
  };


  //FETCH JSON
  const dataset = [{
      "GEN": "2"
    }, {
      "GEN": "1"
    }, {
      "GEN": "1"
    }, {
      "GEN": "2"
    },
    {
      "GEN": "2"
    }, {
      "GEN": "2"
    }, {
      "GEN": "2"
    }, {
      "GEN": "1"
    }
  ]

  //BUILD THE FILTER
  const query = buildFilter(filter);
  const result = filterData(dataset, query);
  console.log(result)
  return result

}

<script src="https://code.highcharts.com/highcharts.js"></script>



<div id="gender"></div>

有谁能解释一下如何处理以下问题吗？

我有两个过滤数据的函数，然后用 Hichart 构建图表每次用户单击饼图的一个切片时，都会触发一个事件并填充一个对象。该对象允许我过滤数据集并重新绘制图表

我缺少的最后一件事是根据要填充的对象更新过滤函数

首先我会这样做

        async function getData() {
  buildFilter = (filter) => {
    let query = {};
    for (let keys in filter) {
        if (filter[keys].constructor === Array && filter[keys].length > 0) {
            query[keys] = filter[keys];
        }
    }
    return query;
  }

然后

  filterData = (data, query) => {
    const filteredData = data.filter( (item) => {
        for (let key in query) {
            if (item[key] === undefined || !query[key].includes(item[key])) {
                return false;
            }
        }
        return true;
    });
    return filteredData;
};

const query = buildFilter(filter);
const result =  filterData(data, query);

我的对象是

let filter = {}

例如，当用户单击切片 myobject 时

let filter = {
gen: "1"
}

Answer 1

看看这个 StackBlitz project .

在 getData() 中，我将您的过滤器简化为:

return data.filter(item => {
    for (const property of Object.keys(filter)) {
        if (item[property] !== filter[property]) {
            return false;
        }
    }
    return true;
});

当单击切片时，我会在更新过滤器后再次调用genderPie()。

您可能希望将数据请求与过滤分开，以便仅下载一次数据，而不是每次更改过滤器时下载数据。