CODEWITHSUNDEEP
jqueryjsonautocomplete
Grge Lks
Grge Lks

Reputation: 83

Accessing an object for jQuery autocomplete

This is a small part of the JSON that i use (which has the same structure)..so i need to get all the ship names from GOD and LEG and use them at JQuery autocomplete

{
  "GOD": {
  "name": "This is a test",
  "code": "GOD",
        "ships": [
            {
                "layout": "normal",
                "type": "Destroyer",
                "name": "Ship George"
            },
            {
                "layout": "normal",
                "type": "Airship",
                "name": "The strong one"
            }
        ]
    },
    "LEG": {
        "name": "Limited God",
        "code": "LEG",
        "ships": [
            {
                "layout": "normal",
                "type": "bad",
                "name": "Blair witch"
            },
            {
                "layout": "normal",
                "type": "the worst",
                "name": "New era"
            }
        ]
    }
}

The problem is that i want to display in autocomplete only the "ships" names. The code that i use for autocomplete is :

$("#autocomplete").autocomplete({
    source: function (request, response) {
        $.ajax({
            dataType: "json",
            data: {
                term: request.term,
            },
            type: 'Get',
            contentType: 'application/json; charset=utf-8',
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            cache: true,
            url: 'all.json',
            success: function (data) {
                var array = $.map(data, function (set) {
                    return {
                        label: set.name,
                        value: set.name
                    }
                });

                //call the filter here
                response($.ui.autocomplete.filter(array, request.term));
            },
            error: function (data) {
            }
        });
    },
    minLength: 2,
    open: function () { },
    close: function () { },
    focus: function (event, ui) { },
    select: function (event, ui) {
        $( "#card" ).val( ui.item.label );
        //$( "#description" ).html( ui.item.text );
        $( "#multiverseid" ).val( ui.item.multi );
        $( "#project-icon" ).attr( "src", "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=" + ui.item.multi + "&type=card" );
    }
});

With that code above i get as autocomplete the values of : GOD and the LEG

if i change the line to :

var array = $.map(data.GOD.ships, function (set) {

then i get all the ships specifically of the GOD

What i need is to get autocomplete suggestions with all the ship names of both GOD and LEG (and others "GODS" and "LEGS" that there are)

Upvotes: 2

Views: 532

Answers (1)

Akki619
Akki619

Reputation: 2432

Success could be like this : 

  var array = $.map(data.GOD.ships, function (set) {
                        return {
                            label: set.name,
                            value: set.name
                        }
                    });
                 var   array1 = $.map(data.LEG.ships, function (set) {
                        return {
                            label: set.name,
                            value: set.name
                        }
                    });
              var outputArray = $.merge(array, array1);                
             console.log(outputArray)
            //call the filter here
            response($.ui.autocomplete.filter(outputArray, request.term));
        },
        error: function (data) {
        }

EDIT 1:

var keys = Object.getOwnPropertyNames ( data )
var outputArray;

$.each(keys,function(ele, val){

    var array = $.map(data[val].ships, function (set) {
                        return {
                            label: set.name,
                            value: set.name
                        }
                    });     
      if(ele == 0)
           outputArray = $.merge([], array);
      else{
           outputArray = $.merge(outputArray, array);
       }  
});
response($.ui.autocomplete.filter(outputArray, request.term));
},
error: function (data) {
}

EDIT 2:

var keys = Object.getOwnPropertyNames ( data )
var outputArray;

$.each(keys,function(ele, val){

    var array = $.map(data[val].ships, function (set) {
                        return {
                          label: set.name + "(" +keys[ele] + ")",
                        value: set.name + "(" +keys[ele] + ")"
                        }
                    });     
      if(ele == 0)
           outputArray = $.merge([], array);
      else{
           outputArray = $.merge(outputArray, array);
       }  
});
response($.ui.autocomplete.filter(outputArray, request.term));
},
error: function (data) {
}

Upvotes: 1

Related Questions