[英]How can I check if javascript array already contains a specific array
[英]How can I check if array contains value in Javascript for JSON data?
請原諒,因為我是社區的新手,目前正在學習為以下內容應用 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
}
]
在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.