How to filter a JSON object by a certain value?

Question

So I'm currently working on a map project using leaflet and javascript. My team and I have collected restaurant data and stored it in a table, which we then converted to a JSON file. The table contains 5 columns for Occasion, Restaurant name, coordinates, budget and vegan options. We have defined 6 occasions and sorted the restaurants accordingly. There's a special icon/marker for each occasion, plus a modified version of each occasion icon that indicates when a restaurant is vegan. So in total there are 12 cases, all defined by a combination of the keys "Occasion" and "vegan". Right now we are struggling with translating this into code. In theory, we want to have an if/else loop iterate over the different conditions and act as a filter, so that we can then insert the special marker for each condition. But we can't find how to address the values for "occasion".

For example, if the occasion is breakfast, we want to address all objects with the key value pair "occasion":"breakfast" and then add the condition whether "vegan" is "0" (not vegan) or "1" (vegan).

In the next step, the coordinates should be shown on the map with their custom icons.

Here's an example of what our JSON data looks like:

[
{
    "occasion": "breakfast",
    "name": "Café Sehnsucht",
    "coordinates": "50.9500188710593, 6.923410759449042",
    "budget": "€€",
    "vegan": 1
  },
{
    "occasion": "Cafes",
    "name": "Starbucks",
    "coordinates": "50.94287364085991, 6.940380798129923",
    "budget": "€€€",
    "vegan": 1
  },
{
    "occasion": "Save money",
    "name": "Aba Yaprak Döner",
    "coordinates": "50.965968529967455, 7.009311882731048",
    "budget": "€",
    "vegan": 0
  }
]

So far we have established communication between the js script and the json file:

//json communication
function readJSON(file) {
  var request = new XMLHttpRequest();
  request.open('GET', file, false);
  request.send(null);
  if (request.status == 200)
    return request.responseText;
};

const temp = readJSON('data.json');
const myObj = JSON.parse(temp);

Tested if the data from the json file is shown in the console:

console.log(Object.values(myObj[1]));

Then we tried to make an array from our json data, but aren't sure if we actually have to:

var array = new Array();
var objects = Object.values(myObj[1]);
console.log(objects[0]);

for (i = 0; i < myObj.length; i++) {
  array = objects[i];
}
console.log(array)

And now we're currently hung up on how to make that if/else loop work. Since I'm at a loss how to phrase this with correct syntax, I've just made a mockup of what I'm guessing it should look like in theory:

    for (i = 0; i < myObj.length; i++) {
    if (value of key "occasion" = "breakfast" && value of key "vegan" = "1") {
    var breakfastIconVegan = L.icon({
      iconUrl: 'icons/breakfasticon_vegan.png',
      iconSize: [20, 20], 
    });
} else if (value of key "occasion" = "breakfast" && value of key "vegan" = "0") {
 var breakfastIcon = L.icon({
      iconUrl: 'icons/breakfasticon.png',
      iconSize: [20, 20], 
    });
}

Are we on the right path or is this nonsense and we need a completely different approach?

Please don't delete and re-ask your [question](https://stackoverflow.com/questions/75572105/how-to-filter-a-json-object-by-a-certain-value). Edit the existing question instead. — Teemu, Feb 26 '23 at 14:28
First of all, your JSON is already an array, so `myObj` should be an array and not need for `Object.values()` and things like that. Now you want to filter your array, which is explained, e.g. here: https://stackoverflow.com/questions/2722159/how-to-filter-object-array-based-on-attributes — Christoph Lütjen, Feb 26 '23 at 14:30
`myObj.filter(site=>site.occasion=='breakfast' && site.vegan)`. Do read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter . — IvanSanchez, Feb 26 '23 at 19:10

SelVazi · Answer 1 · 2023-02-26T14:47:58.700

No need to convert your array objects into array of arrays.

You can access to the objects using for (const elem in myObj)

let myObj = [
{
    "occasion": "breakfast",
    "name": "Café Sehnsucht",
    "coordinates": "50.9500188710593, 6.923410759449042",
    "budget": "€€",
    "vegan": 1
  },
{
    "occasion": "Cafes",
    "name": "Starbucks",
    "coordinates": "50.94287364085991, 6.940380798129923",
    "budget": "€€€",
    "vegan": 1
  },
{
    "occasion": "Save money",
    "name": "Aba Yaprak Döner",
    "coordinates": "50.965968529967455, 7.009311882731048",
    "budget": "€",
    "vegan": 0
  }
];

let breakfastIconVegan = '';
let breakfastIcon = '';

let Cafes_vegan = '';
let Cafes = '';

for (const elem in myObj) {
    let occasion = myObj[elem].occasion;
    let vegan = myObj[elem].vegan;
    if (occasion == "breakfast" && vegan) {
       breakfastIconVegan = 'icons/breakfasticon_vegan.png'
    } else if (occasion == "breakfast" && !vegan) {
       breakfastIcon = 'icons/breakfasticon.png'
    }
    
    if (occasion == "Cafes" && vegan) {
       Cafes_vegan = 'icons/Cafes_vegan.png'
    } else if (occasion == "Cafes" && !vegan) {
       Cafes = 'icons/Cafes.png'
    }
    
    // ... same logic here with other occasions 
}

console.log(breakfastIconVegan);
console.log(breakfastIcon);

console.log(Cafes_vegan);
console.log(Cafes);

How to filter a JSON object by a certain value?

1 Answers1