根据匹配的json数据显示/隐藏div

Question

我有一个函数来加载JSON文件中的所有数据，如果data[i]['brand_id'] == modelId ，我会显示匹配的数据

<script>
    function loadModel(modelId) {
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: '/api/model.json',
            success: function (data) {
                $.each(data, function (i, v) {
                    if (data[i]['brand_id'] == modelId) {
                        $('#item-brand-list').append('<option data-brand-id="' + modelId + '" value="' + data[i]['id'] + '">' + data[i]['name'] + '</li>');
                    }
                });

            }
        });
    }
</script>

此功能将在此代码段上执行：

<script>
    $(document).on('click', '.SelectOption', function () {
        var val = $(this).attr('data-val');
        loadModel(val); // here
    });
</script>

例如，如果任何数据（来自JSON）等于给定的modelId它会将匹配的数据附加到select option但如果没有匹配，我想隐藏select-ads-brand 。

我试过了：

<script>
    if (data[i]['brand_id'] == modelId) {
        $('#select-ads-brand').show();
        $('#item-brand-list').append('<option data-brand-id="' + modelId + '" value="' + data[i]['id'] + '">' + data[i]['name'] + '</li>');
    } else {
        $('#select-ads-brand').hide();
    }
</script>

HTML：

<div id="select-ads-brand">
    <select id="item-brand-list">
        <option>-- Select --</option>
    </select>
</div>

但没有成功，我认为显示隐藏div是不好的逻辑。

有什么建议吗？

Answer 1

尝试使用以下内容：

function loadModel(modelId) {
  $.ajax({
    type: "POST",
    dataType: 'json',
    url: '/api/model.json',
    success: function(data) {
      var foundMatch = false;
      $.each(data, function(i, v) {
        if (data[i]['brand_id'] == modelId) {
          $("#select-ads-brand").show(); // if match found show the div
          $('#item-brand-list').append('<option data-brand-id="' + modelId + '" value="' + data[i]['id'] + '">' + data[i]['name'] + '</li>');
          foundMatch = true; // set variable to true on success of match
        }
      });
      // if no match found simply hide the div
      if(!foundMatch) $("#select-ads-brand").hide();


    }
  });
}

Answer 2

你可以使用filter功能，并做这样的检查

const filtereddata = data.filter(ele => ele['brand_id']==modelId);
if(filtereddata.length > 0)
{
  //add filtered data
  $.each(filtereddata, function (i, v) {
                    $('#item-brand-list').append('<option data-brand-id="' + 
                     modelId + '" value="' + data[i]['id'] + '">' + data[i]
                      ['name'] + '</li>');

            });
  //show
   $('#select-ads-brand').show();
}
else 
{
  //hide
   $('#select-ads-brand').hide();
}