根据用户输入检索 JSON答案

【问题标题】：Retrieving JSON depending on user input根据用户输入检索 JSON
【发布时间】：2020-08-17 16:19:51
【问题描述】：

我正在尝试根据来自各种复选框的用户输入从 JSON 文件中提取数据。下面是我的 JSON 文件的示例；

{
        "factor": 1,
        "pathway": 2,
        "title": "Lorem impsum",
},
{
        "factor": 3,
        "pathway": 2,
        "title": "Lorem impsum",
},
{
        "factor": 4,
        "pathway": 2,
        "title": "Lorem impsum",
},

我首先遍历复选框的值以获取每个用户输入类别的数组，所以我最终会得到两个看起来像这样的数组。

factorArray = [1,3,4]
pathwayArray = [2]

在获取请求期间比较这些数组并在两个值相关的地方提取相关 JSON 的最佳方法是什么？所以对于这个例子，所有三个 JSON 对象都将被返回。

我的获取代码目前如下所示：

function getFactors(e) {
    e.preventDefault();
    var checkboxesPath = document.querySelectorAll('#pathway:checked')
    var pathwayArray = [];
    // Retrieve user input from checkboxes
    for (var i = 0; i< checkboxesPath.length; i++) {
        pathwayArray.push(checkboxesPath[i].value)
    } 
    var checkboxesFactor = document.querySelectorAll('#factors:checked')
    var factorsArray = [];

    for (var i = 0; i< checkboxesFactor.length; i++) {
        factorsArray.push(checkboxesFactor[i].value)
    } 
    
    fetch("pathway.json")
    .then(res => res.json())
    .then(data => {
        let output = ``;
        var results = data.filter(obj => factorsArray.includes(obj.factor) && pathwayArray.includes(obj.pathway))
        console.log(results);
     })
    
}

我尝试在 map 函数中循环遍历数组，但不能让它为多个值工作，用简单的英语我希望得到这样的东西

where factorArray[i] == pathwayArray[i] {
    push relevant JSON to DOM
}

【问题讨论】：

太模糊了。
你的意思是在 javascript 中过滤那个 JSON 文件，还是改变你的后端来为你做这件事？在您的问题中添加更多详细信息可以帮助我们帮助您
数据的形状是什么？
嘿 - 抱歉，我添加了更多细节。我希望在 javascript 中过滤 JSON 文件

标签： javascript json loops fetch

【解决方案1】：

您不能有选择地从 JSON 数组中获取一些对象，因为它是一个简单的文件数据库。如果你真的需要这个，你将不得不使用更复杂的数据库工具（考虑 google cloud firestore）。

但是您可以在获取整个 json 内容后过滤接收到的数据。像这样：

fetch("pathway.json")
    .then(res => res.json())
    .then(data => {
        let output = ``;
        var results = data.filter(obj => factorArray.includes(obj.factor) && factorArray.includes(obj.pathway))
     })

【讨论】：

这太好了，谢谢，我让它独立工作，但是当我在一个函数中使用它时（一旦用户提交了他们的数据就运行，它给出了数组与他们的值进行比较）结果变量返回空 - 我在这里遗漏了一些明显的东西吗？再次感谢。
如果我能看到更多关于这个新问题的数据和代码，那就太好了
我已将整个功能添加到原始帖子中，谢谢。一旦用户提交了复选框的选择，getFactors 函数就会运行，我不认为这与我处理这些数据的方式有关，因为它们最终都是两个单独的数组。我想我在过滤器代码中遗漏了一些东西
您应该在发送请求之前尝试记录factorsArray 和pathwayArray 的值并告诉我
它们的行为符合预期并根据用户选择的值记录为数组

【解决方案2】：

var factorArray = [1,3,4];
var pathwayArray = [2];

const exampleJsonArr = [
{
        "factor": 1,
        "pathway": 2,
        "title": "Lorem impsum",
},
{
        "factor": 3,
        "pathway": 2,
        "title": "Lorem impsum",
},
{
        "factor": 3,
        "pathway": 2,
        "title": "Lorem impsum",
},
{
        "factor": 343,
        "pathway": 52,
        "title": "Lorem impsum",
},
{
        "factor": 3,
        "pathway": 22,
        "title": "Lorem impsum",
},
{
        "factor": 31,
        "pathway": 2,
        "title": "Lorem impsum",
},
{
        "factor": 4,
        "pathway": 2,
        "title": "Lorem impsum",
}]

exampleJsonArr.filter(obj => {return pathwayArray.includes(obj.pathway) || factorArray.includes(obj.factor)})

【讨论】：

【解决方案3】：

尝试以下解决方案：

    var data = [{
        "factor": 1,
        "pathway": 2,
        "title": "Lorem impsum",
    },
    {
      "factor": 3,
      "pathway": 2,
      "title": "Lorem impsum",
    },
    {
      "factor": 4,
      "pathway": 2,
      "title": "Lorem impsum",
    },
    {
      "factor": 5,
      "pathway": 4,
      "title": "Lorem impsum",
    },
    {
      "factor": 6,
      "pathway": 5,
      "title": "Lorem impsum",
    }];
    
    var factorArray = [1,3,4]
    var pathwayArray = [2]
    
    var result = data.filter((item) => {
        return factorArray.includes(item.factor) && pathwayArray.includes(item.pathway);
    });
    
    console.log(result);

【讨论】：