Ndtyjky

I am trying to display the delivery options for a certain courier depending on what address the user has entered into my search field.

Currently, when a user enters their postcode into the search input it will return the closest courier, their location and their delivery details.

My issue is that it is only displaying 1 of the 5 delivery options.

Below is my code.

    $.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 Modal where the results are being displayed

<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>

I know that I have to include the $.each again but include an if statement, but I am not really sure how to go about this.

Any assistance would be great.

Thanks