在React Chart.js2数据集中过滤对象值的数组

Question

I am implementing a dashboard which has a search input field in the parent component, the value gets passed to a chart component as props. I've been trying really hard to filter the data in the chart onChange of search string. Below is my chart setup.

listitems = [{"App_Id":"10426","YearMonth":"201808","App_Name":"XXX- YYY","department":"XXXX","s_name":"Marl"},{"App_Id":"144689","YearMonth":"201808","App_Name":"ttttt","department":"uuuuuu","s_name":"Steveu",}] 

State

 state = {
     data: this.props.listitems,
     filtervalue: ''
  }

Chart Data

const data = {

labels: this.state.data.map(x => x.App_Id),
datasets: [{
    label: "Bugs",
    data: this.state.data.map(x => x.code_bugs),
    data1: this.state.data.map(x => x.App_Name),
    data2: this.state.data.map(x => x.s_name),
    backgroundColor: 'rgba(255,99,132,0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1,
    hoverBackgroundColor: 'rgba(255,99,132,0.4)',
    hoverBorderColor: 'rgba(255,99,132,1)'

}]

};

I am trying to use the a filter to search the values of the object and return a array of filter object which would then become the data for the chart. This would mean use can interactively see the chart getting modified as filter changes in search box.

Below is what i tried with lodash it doesn't work. Please suggest

_.filter(listname,function(item) {return item.App_Name.lowerCase.indexOf('searchstring')>-1;}

Answer 1

Here is one way to achieve this. Overall there are more than few others since it is a simple array filtering.

I also made the filter with configurable key so you can filter on any field.

Note : No need to use lodash in this case since ES6 has more than enough to cover this.

 listItems = [{ "App_Id": "10426", "YearMonth": "201808", "App_Name": "XXX- YYY", "department": "XXXX", "s_name": "Marl" }, { "App_Id": "144689", "YearMonth": "201808", "App_Name": "ttttt", "department": "uuuuuu", "s_name": "Steveu", }] const filterItems = (appName, key) => listItems.filter(i => i[key].indexOf(appName) >=0) console.log(filterItems('ttt', 'App_Name')) console.log(filterItems('XX', 'App_Name')) console.log(filterItems('Stev', 's_name')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>