Autocomplete with jQuery

Question

I have been trying to build a simple jQuery Autocomplete. The ajax query returns a JSON String formatted like this below

[[{"stockkeepingunitname":"LIT","stockkeepingunitid":"627d3240-174d-11ed-a08e-f3a5c3baaa0d"},{"stockkeepingunitname":"LKTTT","stockkeepingunitid":"8fb03b68-1752-11ed-adc9-4f54c8003b1e"},{"stockkeepingunitname":"TBN","stockkeepingunitid":"f0825efe-173d-11ed-a983-1ff727e3bf1b"}]]

Then I pass it to the AutoComplete functions as below.

$('#stockKeepingUnit_StockKeepingUnitName').autocomplete({
            source: function (request, response) {
                $.getJSON("/ajax/GetStockKeepingName/?strStockKeepingName=" + $('#stockKeepingUnit_StockKeepingUnitName').val() +
                    "&lStoreID=" + $('#stockKeepingUnit_StoreID').val(), function (data) {
                        //console.log(response);

                    response($.map(JSON.parse(data), function (item) {
                        
                        console.log(JSON.parse(data));
                        console.log("Value = " + item[0].stockkeepingunitname + " key = " + item[1]);
                            return {

                                label: item[0].stockkeepingunitname,
                                value: item[0].stockkeepingunitid
                            };
                        }))

                    });
            },
            minLength: 1,
            delay: 100
        });
        $("#stockKeepingUnit_StockKeepingUnitNameame").autocomplete("option", "position",
            { my: "right-10 top+10", at: "right top" })

I am however unable to decode the rest of the list because I am only able to access the item[0] only but I have confirmed that the JSON contains more than one row, hence the list displays only one row.

If I remove the [0] the debugger says the element is a JavaScript object [object Object] element, but I can still see the list of objects in the debugger.

Answer 1

Consider the following example.

JSFiddle: https://jsfiddle.net/Twisty/p9hzcdLb/

$(function() {

  var myData = [
    [{
      "stockkeepingunitname": "LIT",
      "stockkeepingunitid": "627d3240-174d-11ed-a08e-f3a5c3baaa0d"
    }, {
      "stockkeepingunitname": "LKTTT",
      "stockkeepingunitid": "8fb03b68-1752-11ed-adc9-4f54c8003b1e"
    }, {
      "stockkeepingunitname": "TBN",
      "stockkeepingunitid": "f0825efe-173d-11ed-a983-1ff727e3bf1b"
    }]
  ];

  $('#stockKeepingUnit_StockKeepingUnitName').autocomplete({
    source: function(request, response) {
      $.getJSON("/ajax/GetStockKeepingName/", {
        "strStockKeepingName": request.term,
        "lStoreID":  $('#stockKeepingUnit_StoreID').val()
      }, function(data){
        response($.map(data[0], function(item) {
          console.log(data);
          console.log("Value = " + item.stockkeepingunitname + " key = " + item.stockkeepingunitid);
          return {
            label: item.stockkeepingunitname,
            value: item.stockkeepingunitid
          };
        }));
      });
    },
    minLength: 1,
    delay: 100
  });
  $("#stockKeepingUnit_StockKeepingUnitNameame").autocomplete("option", "position", {
    my: "right-10 top+10",
    at: "right top"
  });
});

You have a complex response data, so you need to ensure you are iterating the correct items.

Answer 2

The error was the extra [ and ] in the JSON string, so whenever JSON.parse(data) was invoked it made a malformed JSON string. Removing the initial and closing [] tags removed the error, first with dataString.replace("[[{", "[{"); and then dataString.replace("}]]", "}]"); solved the problem.

Everything working fine now.