Autocomplete with jQuery-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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.