Как обновить функцию asyn c await при изменении переменной?

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 Каждый раз, когда пользователь щелкает, например, фрагмент диаграммы ap ie, происходит событие и заполняется объект. Этот объект позволяет мне фильтровать набор данных и перерисовывать диаграмму

Последнее, что мне не хватает, - это обновить функции фильтрации на основе объекта, который нужно заполнить

. Сначала я сделаю это. это

        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 = {}

, когда пользователь щелкает по срезу, мой объект становится, например,

let filter = {
gen: "1"
}

Answer 1

Взгляните на этот проект StackBlitz .

В getData() я упростил ваш фильтр до этого:

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

и когда срез щелкнув, я снова вызываю genderPie(), после обновления filter.

Возможно, вы захотите отделить запрос данных от фильтрации, чтобы данные загружались только один раз, а не каждый раз при смене фильтра. .