如何按某个值过滤JSON对象？

Question

所以我目前正在使用 leaflet 和 javascript 进行地图项目。我和我的团队收集了餐厅数据并将其存储在一个表中，然后我们将其转换为 JSON 文件。该表包含 5 列，分别用于场合、餐厅名称、坐标、预算和素食选项。我们定义了 6 种场合，并对餐厅进行了相应的排序。每个场合都有一个特殊的图标/标记，加上每个场合图标的修改版本，指示餐厅何时是素食主义者。所以总共有 12 种情况，全部由键“Occasion”和“vegan”的组合定义。现在我们正在努力将其转化为代码。理论上，我们希望有一个 if/else 循环遍历不同的条件并充当过滤器，这样我们就可以为每个条件插入特殊标记。但我们找不到如何解决“场合”的价值观。

例如场合是早餐，我们要寻址键值对为“场合”的所有对象：“早餐”，然后添加条件“素食主义者”是“0”（非素食主义者）还是“1”（素食主义者）。

在下一步中，坐标应使用自定义图标显示在地图上。

这是我们的 JSON 数据的示例：

[
{
    "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
  }
]

至此我们已经建立了js脚本和json文件的通信：

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

测试json文件中的数据是否显示在控制台中：

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

然后我们尝试从我们的 json 数据创建一个数组，但不确定我们是否真的必须这样做：

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)

现在我们正在研究如何使 if/else 循环工作。由于我不知道如何用正确的语法来表达这一点，所以我只是制作了一个我猜它在理论上应该是什么样子的模型：

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

我们是在正确的道路上还是在胡说八道，我们需要一种完全不同的方法？

Answer 1

无需将数组对象转换为数组的数组。

您可以使用

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