如何检查数组是否包含 Javascript 中的 JSON 数据值？

Question

请原谅，因为我是社区的新手，目前正在学习为以下内容应用 Javascript 和 JSON：

我试图匹配 "id": 7,"name": "UPS", "parent_id": [3, 4] 当用户选择 "id": 3 或 "id": 4

我可以知道我应该如何在下面的代码中实现 .indexOf 或 .includes

索引.html

<script>
$(document).ready(function(){

 load_json_data('service');

 function load_json_data(id, parent_id)
 {
  var html_code = '';
  $.getJSON('data.json', function(data)
  {
   html_code += '<option value="">Select '+id+'</option>';
   $.each(data, function(key, value)
   {
    if(id == 'service')
    {
     if(value.parent_id == '0')
     {
      html_code += '<option value="'+value.id+'">'+value.name+'</option>';
     }
    }
    else
    {
     if(value.parent_id == parent_id)
     {
      html_code += '<option value="'+value.id+'">'+value.name+'</option>';
     }
    }
   });
   $('#'+id).html(html_code);
  });

 }

 $(document).on('change', '#service', function(){
  var service_id = $(this).val();
  if(service_id != '')
  {
   load_json_data('item', service_id);
   $('#contact').html('<option value="">Select contact</option>');
  }
  else
  {
   $('#item').html('<option value="">Select item</option>');
   $('#contact').html('<option value="">Select contact</option>');
  }
 });
 $(document).on('change', '#item', function(){
  var item_id = $(this).val();
  if(item_id != '')
  {
   load_json_data('contact', item_id);
  }
  else
  {
   $('#contact').html('<option value="">Select contact</option>');
  }
 });
});
</script>

数据.json

[
 {
  "id": 1,
  "name": "Delivery",
  "parent_id": 0
 }, 
 {
  "id": 2,
  "name": "Repair",
  "parent_id": 0
 }, 
 {
  "id": 3,
  "name": "Quick Deliver",
  "parent_id": 1
 }, 
  {
  "id": 4,
  "name": "Slow Deliver",
  "parent_id": 1
 }, 
 {
  "id": 5,
  "name": "Aircon",
  "parent_id": 2
 }, 
 {
  "id": 6,
  "name": "Television",
  "parent_id": 2
 }, 
 {
  "id": 7,
  "name": "UPS",
  "parent_id": [3, 4]
 }, 
 {
  "id": 8,
  "name": "LG support",
  "parent_id": 5
 },
 {
  "id": 9,
  "name": "Toshiba support",
  "parent_id": 6
 }
]

Answer 1

在data.json文件的数据结构中，parent_id可以是integer ，也可以是array of integers 。

parent_id 作为integer示例：

 {
  "id": 8,
  "name": "LG support",
  "parent_id": 5
 }

parent_id 作为array示例：

{
  "id": 7,
  "name": "UPS",
  "parent_id": [3, 4]
 }

但是，在您的代码中，您没有考虑第二种情况（parent_id 作为array ）。

因此，在进行此比较的if语句中，您必须添加or来处理行具有 parent_id 作为数组的情况。

代替

if(value.parent_id == parent_id) {
  html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}

您还应该使用以下处理数组的代码（使用Array.isArray()和Array.include()函数）：

if(value.parent_id == parent_id || 
   (Array.isArray(value.parent_id) && value.parent_id.includes(+parent_id)))
{
   html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}

这是一个完整的工作片段（在第一个<select>选择服务delivery最终将在第三个<select>显示UPS选项）：

（警告：在代码片段中，我已经覆盖了$.getJSON ，不要复制那部分代码）。

 $(document).ready(function(){ load_json_data('service'); function load_json_data(id, parent_id) { console.log('id = ' + id + ', parent_id = ' + parent_id); var html_code = ''; $.getJSON('data.json', function(data) { html_code += '<option value="">Select '+id+'</option>'; $.each(data, function(key, value) { //console.log(key + ' - ' + JSON.stringify(value)); if(id == 'service') { if(value.parent_id == '0') { html_code += '<option value="'+value.id+'">'+value.name+'</option>'; } } else { if(value.parent_id == parent_id || (Array.isArray(value.parent_id) && value.parent_id.includes(+parent_id))) { html_code += '<option value="'+value.id+'">'+value.name+'</option>'; } } }); $('#'+id).html(html_code); }); } $(document).on('change', '#service', function(){ var service_id = $(this).val(); if(service_id != '') { load_json_data('item', service_id); $('#contact').html('<option value="">Select contact</option>'); } else { $('#item').html('<option value="">Select item</option>'); $('#contact').html('<option value="">Select contact</option>'); } }); $(document).on('change', '#item', function(){ var item_id = $(this).val(); if(item_id != '') { load_json_data('contact', item_id); } else { $('#contact').html('<option value="">Select contact</option>'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script type="text/javascript"> $.getJSON = function(file, callback){ var data = [ { "id": 1, "name": "Delivery", "parent_id": 0 }, { "id": 2, "name": "Repair", "parent_id": 0 }, { "id": 3, "name": "Quick Deliver", "parent_id": 1 }, { "id": 4, "name": "Slow Deliver", "parent_id": 1 }, { "id": 5, "name": "Aircon", "parent_id": 2 }, { "id": 6, "name": "Television", "parent_id": 2 }, { "id": 7, "name": "UPS", "parent_id": [3, 4] }, { "id": 8, "name": "LG support", "parent_id": 5 }, { "id": 9, "name": "Toshiba support", "parent_id": 6 } ]; callback(data); }; </script> <select id="service"></select> <select id="item"></select> <select id="contact"></select>