Retrieving JSON depending on user input

user_14120383 0
Viewed 84

I'm trying to pull data from a JSON file depending on the user input that has come from various checkboxes. An example of my JSON file is below;

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

I first loop through the values of the checkboxes to get an array for each category of user input so i'll end up with two arrays that look something like this.

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

What would be the best way to compare these arrays during the fetch request, and pull relevant JSON where the two values relate? So for this example all three of the JSON objects would be returned.

My fetch code currently looks like this:

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);
     })
    
}

I've tried looping through the arrays while in the map function but cannot get it to work for multiple values, in plain english I'm hoping to get something like this

where factorArray[i] == pathwayArray[i] {
    push relevant JSON to DOM
}
fetch loops json javascript
3 Answers
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)})
user_33678180

Try Below Solution:

    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);
user_77649350

You can't selectively fetch some objects from your JSON array since it's a simple file database. If you really need this, you'll have to use more complex database tools (consider google cloud firestore).

But you can filter the received data after the entire json content has been fetched. Like so:

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