JSON数组根据所选项目使用jquery提取对象

时间:2018-11-16 16:01:20

标签: jquery json

我正在尝试根据用户在我的搜索字段中输入的地址来显示特定快递的递送选项。

当前,当用户在搜索输入中输入邮政编码时,它将返回最近的快递,其位置和交货详细信息。

我的问题是,它仅显示5个投放选项中的1个。

下面是我的代码。

    $.ajaxSetup({
        cache: false
    });
    $('#search').keyup(function() {
        $('#result').html('');
        $('#lat-long').html('');
        $('#opening-times').html('');
        $('#del-options').html('');
        var searchField = $('#search').val();
        var expression = new RegExp(searchField, "i");
        $.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {
            $.each(data, function(key, value) {
                console.log(value)
                if (value.address.name.search(expression) != -1 || value.address.line1.search(expression) != -1 || value.address.town.search(expression) != -1 || value.address.county.search(expression) != -1 || value.address.postcode.search(expression) != -1) {
                    //COURIER ADDRESS DETAILS
                    $('#result').html('<li class="list-group-item link-class"><div class="c-name"> ' + value.name + ' </div><div class="address"> ' + value.address.name + ',' + value.address.line1 + ',' + value.address.town + ',' + value.address.county + ',' + value.address.postcode + '</div></li>');
                    //LAT AND LONG
                    $('#lat-long').html('<li class="list-group-item link-class"><div class=""> ' + value.location.latitude + ' </div><div class=""> ' + value.location.longitude + ' </div></li>');
                    //OPENING TIMES
                    $('#opening-times').html('<li class="list-group-item link-class"><div class="">Mon ' + value.opening_times.Mon + ' </div><div class="">Tues ' + value.opening_times.Tues + ' </div><div class="">Wed ' + value.opening_times.Wed + ' </div><div class="">Thurs ' + value.opening_times.Thurs + ' </div><div class="">Fri ' + value.opening_times.Fri + ' </div><div class="">Sat ' + value.opening_times.Sat + ' </div><div class="">Sun ' + value.opening_times.Sun + ' </div></li>');
                    // ARRAY DELIVERY OPTIONS
                    $.each(value.delivery_options, function(key, val) {
                            $('#del-options').html('<li class="list-group-item link-class"><div> ' + val.name + ' </div><div> ' + val.description + ' </div><div class=""> ' + val.price + ' </div></li>');
                    })

                    //COURIER ADDRESS FOR OTHER CONTAINER
                    $('#address-container').html('<div class="list-group-item link-class"><div class="c-name"> ' + value.name + ' </div><div class="d-inline-block w-100"> ' + value.address.name + ' </div><div class="d-inline-block w-100"> ' + value.address.line1 + ' </div><div class="d-inline-block w-100"> ' + value.address.town + '</div><div class="d-inline-block w-100"> ' + value.address.county + ' </div><div class="d-inline-block w-100"> ' + value.address.postcode + '</div></div>');
                }
            });
        });
    });

显示结果的HTML模式

<div class="modal" id="exampleModalLive" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Click and Collect</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <ul class="list-group" id="result"></ul>
                    </div>
                    <div class="col-6">
                        <div class="d-inline-block w-100">
                            <ul class="list-group" id="lat-long"></ul>
                        </div>
                        <div class="d-inline-block col-6 float-left pl-0">
                            <div class="list-group" id="address-container"></div>
                            <ul class="list-group" id="opening-times"></ul>
                        </div>
                        <div class="d-inline-block col-6 float-left pr-0">
                            <ul class="list-group" id="del-options"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我知道我必须再次包含$ .each,但是要包含if语句,但是我不确定如何执行此操作。

任何帮助都会很棒。

谢谢

0 个答案:

没有答案