Accessing an object for jQuery autocomplete

Question

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)

just a thought, what if you put data.GOD.ships and then in the same array data.LEG.ships that way array will be populated with both value.... — Akki619
– Akki619, Commented Oct 13, 2015 at 12:37
The thought is not bad, but how will i implement that inside JQuery autocomplete, using $.map or other function... — Grge Lks
– Grge Lks, Commented Oct 13, 2015 at 12:39
It's the value in the text field (while user typing, autocomplete functions)... — Grge Lks
– Grge Lks, Commented Oct 13, 2015 at 12:43
I am putting code which is just to let you know what I am thinking, its not tested you can try. I will remove it as an answer. But I am sure there will be a better way. — Akki619
– Akki619, Commented Oct 13, 2015 at 12:45

Akki619 · Accepted Answer · 2015-10-13 14:34:07Z

1

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) {
}

edited Oct 13, 2015 at 14:34

answered Oct 13, 2015 at 12:46

Akki619

2,4326 gold badges29 silver badges58 bronze badges

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

11 Comments

Grge Lks Over a year ago

works...but now i need to create these arrays and merge them somehow automatically! (as they are hundred and not only 2...)!! Thank you

Akki619 Over a year ago

do u mean to say there are more keys than just GOD and LEG? or does GOD and LEG have more children's?

Grge Lks Over a year ago

There are more GOD and LEG (about a hundred and more) that have ships inside. So we need for example a loop that will grab this automatically through the json file and create array1,array2,array3 and then merge them with the way above

Akki619 Over a year ago

need to see the JSON sample could you post a sample; not complete but at least to cover the entire hierarchy?

Grge Lks Over a year ago

Excellent mate! Thank youuuu, i will vote up your solution when i go reputation 15, you are just amazing!

|

Collectives™ on Stack Overflow

Accessing an object for jQuery autocomplete

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related