Search code examples
javascriptajaxxmlstringautofill

Javascript Ajax call returns same string multiple times from XML. How can this be avoided?

I have the following issue: When I make an Ajax call to give people an option to "autofill" a field, it offers the same string (as seen in the image below). The problem is, that the Ajax call uses an URL where the string appears in an XML multiple times.

For example, when calling

/tools/_api/web/lists/getbytitle('Besucheranmeldung')/Items?&$filter=substringof('Aalen', FirmaNeu)&$select=FirmaNeu

the XML will look something like that:

<?xml version="1.0" encoding="utf-8"?><feed xml:base="https://mylink/tools/_api/" xmlns="http://www.w3.org/2005/Atom" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:georss="http://www.georss.org/georss" xmlns:gml="http://www.opengis.net/gml"><id>fbe3c761-2113-4be6-b8dd-599cf842df2f</id><title /><updated>2020-12-16T12:58:45Z</updated><entry m:etag="&quot;2&quot;"><id>Web/Lists(guid'5d3a8bf8-7edf-4b7e-aab8-5df6cd818573')/Items(10891)</id><category term="SP.Data.BesucheranmeldungListItem" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" /><link rel="edit" href="Web/Lists(guid'5d3a8bf8-7edf-4b7e-aab8-5df6cd818573')/Items(10891)" /><title /><updated>2020-12-16T12:58:45Z</updated><author><name /></author><content type="application/xml"><m:properties><d:FirmaNeu>IGM Aalen</d:FirmaNeu></m:properties></content></entry><entry m:etag="&quot;2&quot;"><id>Web/Lists(guid'5d3a8bf8-7edf-4b7e-aab8-5df6cd818573')/Items(10893)</id><category term="SP.Data.BesucheranmeldungListItem" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" /><link rel="edit" href="Web/Lists(guid'5d3a8bf8-7edf-4b7e-aab8-5df6cd818573')/Items(10893)" /><title /><updated>2020-12-16T12:58:45Z</updated><author><name /></author><content type="application/xml"><m:properties><d:FirmaNeu>'IGM Aalen</d:FirmaNeu></m:properties></content></entry><entry m:etag="&quot;2&quot;"><id>Web/Lists(guid'5d3a8bf8-7edf-4b7e-aab8-5df6cd818573')/Items(10894)</id><category term="SP.Data.BesucheranmeldungListItem" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" /><link rel="edit" href="Web/Lists(guid'5d3a8bf8-7edf-4b7e-aab8-5df6cd818573')/Items(10894)" /><title /><updated>2020-12-16T12:58:45Z</updated><author><name /></author><content type="application/xml"><m:properties><d:FirmaNeu>IGM Aalen</d:FirmaNeu></m:properties></content></entry><entry m:etag="&quot;2&quot;"><id>Web/Lists(guid'5d3a8bf8-7edf-4b7e-aab8-5df6cd818573')/Items(10895)</id><category term="SP.Data.BesucheranmeldungListItem"

enter image description here

I use the following code to get the dropdown:

var requestHeaders = {
    "Accept": "application/json;odata=verbose",
    "X-RequestDigest": NWF$("#__REQUESTDIGEST").val()
};


function startAutoComplete(varTextBoxId, listname) {
    console.log("startAutoComplete called!");

    NWF$("#" + varTextBoxId).autocomplete({

        source: function (request, response) {

            var query = getQuery(request.term, listname);

            var testurl = "/tools/_api/web/lists/getbytitle('" + listname + "')/Items?&$filter=" + query;

            console.log("testurl: " + testurl);

            NWF$.ajax({

                url: "/tools/_api/web/lists/getbytitle('" + listname + "')/Items?&$filter=" + query,
                contentType: "application/json;odata=verbose",
                headers: requestHeaders,

                error: function (xhr, ajaxOptions, thrownError) {
                    alert("error:" + thrownError + "\n" + xhr.status);
                },

                success: function (data) {
                    response(NWF$.map(data.d.results, function (item) {


                        switch (listname) {
                            case "Besucheranmeldung":

                                return {
                                    label: item.FirmaNeu,
                                    value: item.FirmaNeu,
                                    id: item.FirmaNeu,
                                    listname: listname
                                }
                                break;

                        }
                        
                    }));
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            

        },
        open: function () {
            NWF$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            NWF$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });

}

function getQuery(requestStr, listname) {
    var retvalue = "";

    requestStr = encodeURIComponent(requestStr);

    switch (listname) {

        case "Besucheranmeldung":
            retvalue = "substringof('" + requestStr + "', FirmaNeu)" + "&$select=FirmaNeu";
            break;
    }
    
    // console.log("retvalue: " + retvalue);
    return retvalue;
    
}

How can this be avoided? Is there a way to make an if statement which checks whether the dropdown contains the same string twice to avoid letting it appear there multiple times?

When I do console.log(data.d.results);, I get the following:

enter image description here

Solution

  • Fixed it by changing the code:

    var requestHeaders = {
    "Accept": "application/json;odata=verbose",
    "X-RequestDigest": NWF$("#__REQUESTDIGEST").val()
};


function startAutoComplete(varTextBoxId, listname) {
    console.log("startAutoComplete called!");

    NWF$("#" + varTextBoxId).autocomplete({

        source: function (request, response) {

            var query = getQuery(request.term, listname);

            NWF$.ajax({

                url: "/tools/_api/web/lists/getbytitle('" + listname + "')/Items?&$filter=" + query,
                contentType: "application/json;odata=verbose",
                headers: requestHeaders,

                error: function (xhr, ajaxOptions, thrownError) {
                    alert("error:" + thrownError + "\n" + xhr.status);
                },

                success: function (data) {
                    // console.log(data.d.results);
                    var firmaResults;
                    var firmen = [];
                    firmaResults = groupBy(data.d.results,'FirmaNeu');
                    // console.log(firmaResults);

                    for (var i = 0; i < firmaResults.length; i++ ){
                        firmen[i] = firmaResults[i];
                    }

                    var counter = -1;

                    response(NWF$.map(data.d.results, function (item) {


                        switch (listname) {
                            case "Besucheranmeldung":
                                counter++;
                                if (counter > firmaResults.length){
                                    return;
                                }
                                return {
                                    label: firmen[counter],
                                    value: firmen[counter],
                                    id: firmen[counter],
                                    listname: listname
                                }

                                break;
                        }

                    }));

                }
            });
        },
        minLength: 2,
        select: function (event, ui) {


        },
        open: function () {
            NWF$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            NWF$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
    
}

function getQuery(requestStr, listname) {
    var retvalue = "";

    requestStr = encodeURIComponent(requestStr);

    switch (listname) {

        case "Besucheranmeldung":
            retvalue = "substringof('" + requestStr + "', FirmaNeu)" + "&$select=FirmaNeu";
            break;
    }
    
    // console.log("retvalue: " + retvalue);
    return retvalue;
    
}


function groupBy(items,propertyName)
{
    var result = [];
    $.each(items, function(index, item) {
        if ($.inArray(item[propertyName], result) == -1) {
            result.push(item[propertyName]);
        }
    });
    return result;
}