循环JSON作为对象选择下拉菜单

Question

我有如下所示的api。

{
    "_success": true,
    "results": [
        {
            "source": "ID",
            "type": "H",
            "mode": [
                "equal"
            ]
        },
        {
            "source": "channel",
            "type": "H",
            "mode": [
                "equal",
                "like"
            ]
        },
        {
            "source": "aging_days",
            "type": "H",
            "mode": [
                "equal",
                "greater than",
                "less than"
            ]
        }
    ],
    "empty": false
}

我想将json api的结果作为两个依赖项选择下拉列表进行循环。源的第一个字段是模式。我设法循环播放源，但不知道如何循环播放模式。例如，如果用户在来源中选择“ aging_days”，则模式下拉菜单应显示等于，大于和小于。

HTML

<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered table-striped" id="item_table">
    <tr>
        <th width="40%">FILTER BY </th>
        <th width="15%">MODE</th>
        <th width="40%">KEYWORD</th>
        <th width="5%"><button type="button" name="add" class="btn btn-success btn-xs add"><span class="glyphicon glyphicon-plus"></span></button></th>
    </tr>
</table>
<div align="center">
    <button type="submit" name="action_filter" class="btn btn-primary" value="filter">Filter</button>
    <button type="submit" name="action_reset" class="btn btn-danger" value="reset">Reset</button>
</div>

JAVASCRIPT

$(document).ready(function(){

$(document).on('click', '.add', function(){     
    var html = '';
    html += '<tr>';
    html += '<td><select name="filter_column[]" id="filter_column[]" class="form-control filter_column" required><option value="">Please Select</option><?php foreach($filter_lov as $array_filter_lov){
    foreach ($array_filter_lov as $k => $v) {

        if ($k == 'source') $fsource = $v;
        if ($k == 'mode') $fmode = $v;      
    } 
    if (substr($fsource, 0, 1) !== '_'){
        echo "<option>".$fsource."</option>";}}?></select></td>';
    html += '<td></td>';
    html += '<td><input type="text" name="filter_keyword[]" id="filter_keyword[]" class="form-control filter_keyword"  /></td>';
    html += '<td><button type="button" name="remove" class="btn btn-danger btn-xs remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
    $('#item_table').append(html);
});

$(document).on('click', '.remove', function(){
    $(this).closest('tr').remove();
});

$(document).on('click', '.remove', function(){
    $(this).closest('tr').remove();
});

$('#insert_form').on('submit', function(event){
    event.preventDefault();
    var error = '';

    $('.filter_column').each(function(){
        var count = 1;
        if($(this).val() == '') {
            error += "<p>Select column at Row "+count+"</p>";
            return false;
        }
        count = count + 1;
    });

    $('.filter_mode').each(function(){
        var count = 1;
        if($(this).val() == '') {
            error += "<p>Select mode at Row "+count+"</p>";
            return false;
        }
        count = count + 1;
    }); 

    $('.filter_keyword').each(function(){
        var count = 1;
        if($(this).val() == '') {
            error += "<p>Enter keyword at Row "+count+"</p>";
            return false;
        }
        count = count + 1;
    });

    var form_data = $(this).serialize();
    if(error != '') {
        $('#error').html('<div class="alert alert-danger">'+error+'</div>');
    } 
});});