How to group a JSON array of objects together

Question

I have a JSON file which has an array of objects under 'delivery_options'.

https://api.myjson.com/bins/m0a3m

Currently, I am extracting this data using .each

                $.each(value.delivery_options, function(key, val) {
                        $('#del-options').append('<li del-id='+ key +'  class="list-group-item del-options link-class"><div> ' + val.name + ' </div><div> ' + val.description + ' </div><div class=""> ' + val.price + ' </div></li>');
                })

My issue with this is, it's printing all the delivery options under one list <ul> </ul> instead of breaking them up into multiple lists <ul> </ul> <ul> </ul> <ul> </ul>

below is the full jquery I am using.

    $.ajaxSetup({
        cache: false
    });
    $('#search').blur(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) {
            //console.log('json')
            $.each(data, function(key, 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) {
                //console.log(value)
                    //COURIER ADDRESS DETAILS
                    $('#result').append('<li data-contentid='+ key +' class="list-group-item courier"><div class="c-name font-weight-bold"> ' + 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

                    var mapProp= {
                        center:new google.maps.LatLng(value.location.latitude,value.location.longitude),
                        zoom:5,
                        };
                    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);



                    //OPENING TIMES
                    $('#opening-times').append('<li id=open-times-'+ key +'  class="list-group-item op-times"><div class="c-name font-weight-bold"> Opening Times </div><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').append('<li del-id='+ key +'  class="list-group-item del-options link-class"><div> ' + val.name + ' </div><div> ' + val.description + ' </div><div class=""> ' + val.price + ' </div></li>');
                    })

                    //COURIER ADDRESS FOR OTHER CONTAINER
                    $('#address-container').append('<li id=cour-add-'+ key +'  class="list-group-item alt-address link-class"><div class="c-name font-weight-bold"> ' + 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></li>');
                }
            });
        });
    });

Here is a screenshot to help show the issue. As you can see 0 - 5 should be in one list and then another 0 - 5 in another list.

https://snag.gy/g2Dtqd.jpg

Any assistance or tips would be great.

Thanks in advance

justrusty · Accepted Answer · 2018-11-17 16:13:51Z

1

If you change the markup to

<div id="del-lists-wrapper"></div>

and then the js to something like

var ul = $('<ul></ul>');
$.each(value.delivery_options, function(key, val) {
    ul.append('<li del-id=' + key + '  class="list-group-item del-options link-class"><div> ' + val.name + ' </div><div> ' + val.description + ' </div><div class=""> ' + val.price + ' </div></li>');
});
ul.appendTo('#del-lists-wrapper');

So your whole code as above would be

$.ajaxSetup({
    cache: false
});
$('#search').blur(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) {
        //console.log('json')
        $.each(data, function(key, 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) {
            //console.log(value)
                //COURIER ADDRESS DETAILS
                $('#result').append('<li data-contentid='+ key +' class="list-group-item courier"><div class="c-name font-weight-bold"> ' + 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

                var mapProp= {
                    center:new google.maps.LatLng(value.location.latitude,value.location.longitude),
                    zoom:5,
                    };
                var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);



                //OPENING TIMES
                $('#opening-times').append('<li id=open-times-'+ key +'  class="list-group-item op-times"><div class="c-name font-weight-bold"> Opening Times </div><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
                var ul = $('<ul></ul>');
                $.each(value.delivery_options, function(key, val) {
                    ul.append('<li del-id=' + key + '  class="list-group-item del-options link-class"><div> ' + val.name + ' </div><div> ' + val.description + ' </div><div class=""> ' + val.price + ' </div></li>');
                });
                ul.appendTo('#del-lists-wrapper');

                //COURIER ADDRESS FOR OTHER CONTAINER
                $('#address-container').append('<li id=cour-add-'+ key +'  class="list-group-item alt-address link-class"><div class="c-name font-weight-bold"> ' + 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></li>');
            }
        });
    });
});

edited Nov 17, 2018 at 16:13

answered Nov 17, 2018 at 15:55

justrusty

8467 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Danzel91 Over a year ago

This puts them into separate lists which is great - but now is extracting all the delivery options instead of only displaying the delivery options for the correct ID - any ideas?

justrusty Over a year ago

You still need the rest of the code in there. So it still needs to be in the if statement. I'll update the answer so it's easier for you.

Danzel91 Over a year ago

I had it in the right position. I just had the .each function twice. Thanks a lot - I appreciate the help.

justrusty Over a year ago

Yeah soz I just realised that first answer wasn't as clear as it could have been and you couldn't just drop in the code so I removed that first loop cuz you already have it and I just updated your own code so it worked 'out the box' as it were. Glad I could help :)

Collectives™ on Stack Overflow

How to group a JSON array of objects together

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related