如何正确地将子字符串过滤器应用于 d3 中的 Json 数组答案

【问题标题】：How to correctly apply a Substring-Filter to an Json array in d3如何正确地将子字符串过滤器应用于 d3 中的 Json 数组
【发布时间】：2020-08-05 19:01:58
【问题描述】：

我正在尝试过滤如下所示的 json 数据数组：

var data = [
    {
        "key": "FirstGroup",
        "color": "#1f77b4",
        "values": [
            {
                "label": "PWY-6089",
                "value": 0.0
            },
            {
                "label": "TOLSULFDEG-PWY",
                "value": 0.0
            },
           
        ]
    },
    {
        "key": "SecondGroup",
        "color": "#78bf00",
        "values": [
            
            {
                "label": "PWY-4101",
                "value": 0.3
            },
            {
                "label": "PWY0-1356",
                "value": 0.5
            }
        ]
    },
    {
        "key": "ThirdGroup",
        "color": "#d62728",
        "values": [
            {
                "label": "PWY-4101",
                "value": 1.0
            },
            {
                "label": "PWY0-1356",
                "value": 1.0
            }
        ]
    }
]

现在我希望filteredData 成为stackedChartData 的子集，其中filterString 是“label”的子字符串。这是我的方法：

function startsWith(str, word) {
  return str.lastIndexOf(word, 0) === 0;
}
function filterData() {
  input = document.getElementById('filterInput');
  filterString = input.value;
  
  
  var filteredData = stackedChartData.filter(function (entry) {
        entry.values.forEach(element => {
        
         return startsWith(element.label,filterString);
            
        }); 
  });

 console.log(filteredData,"filteredData");
  
}

由于 String.startsWith() 无法正常工作，我在代码中使用了 startsWith()。 filterString 应该是它，element.label 指的是我的 json 文件的正确属性，例如PWY-6089。然而 FilteredData 仍然是空的。我不明白我在这里做错了什么，希望能得到一些帮助，问候。

【问题讨论】：

@Hom，如果回答对你有帮助，欢迎采纳和投票，对以后的参考有帮助

标签： javascript json d3.js

【解决方案1】：

问题

For 循环只是迭代，不返回任何内容

解决方案

要获取过滤后的数据，可以在数组方法中使用filter和find

说明（以下 sn-p 示例）

过滤器 - 从 3 个对象中，我需要得到 2 个
find - 满足startsWith条件时立即返回

查看下面的 sn-p 代码

let data = [{
    "key": "FirstGroup",
    "color": "#1f77b4",
    "values": [{
        "label": "PWY-6089",
        "value": 0
      },
      {
        "label": "TOLSULFDEG-PWY",
        "value": 0
      }
    ]
  },
  {
    "key": "SecondGroup",
    "color": "#78bf00",
    "values": [{
        "label": "PWY-4101",
        "value": 0.3
      },
      {
        "label": "PWY0-1356",
        "value": 0.5
      }
    ]
  },
  {
    "key": "ThirdGroup",
    "color": "#d62728",
    "values": [{
        "label": "PWY-4101",
        "value": 1
      },
      {
        "label": "PWY0-1356",
        "value": 1
      }
    ]
  }
]

let filteredData = data.filter(datumn =>
  datumn.values.find(valueDatumn =>
    valueDatumn.label.startsWith('PWY-41') // for example, here you can pass the string from the user
  )
)

console.log(filteredData)

【讨论】：