How to prevent a Javascript Ajax call from retrieving the same string repeatedly from an XML file?

Question

How to prevent a Javascript Ajax call from retrieving the same string repeatedly from an XML file?

Encountering a challenge where an Ajax call presents the same string multiple times when attempting to autofill a field. This occurs because the URL used in the Ajax call contains the string numerous times within an XML structure.

For instance, upon executing:

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

The resulting XML appears as follows:

<?xml version="1.0" encoding="utf-8"?><feed xml:base="https://mylink/tools/_api/" xmlns="http://www.w3.org/2005/Atom" ...

https://i.sstatic.net/cXBad.png

A code snippet is utilized to generate the dropdown menu:

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

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

Is there a way to address this issue and prevent duplicate strings from appearing within the dropdown menu?

Upon logging console.log(data.d.results);, the output is as shown:

https://i.sstatic.net/mArNT.png

javascript ajax xml string autofill

Answer 1

Answer №1

Resolved the issue by updating the code:

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

function initializeAutoComplete(varTextBoxId, listname) {
    console.log("initializeAutoComplete function triggered!");

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

        source: function (request, response) {

            var query = generateQuery(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) {
                    var companyResults;
                    var companies = [];
                    companyResults = groupBy(data.d.results,'CompanyNew');

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

                    var counter = -1;

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


                        switch (listname) {
                            case "VisitorRegistration":
                                counter++;
                                if (counter > companyResults.length){
                                    return;
                                }
                                return {
                                    label: companies[counter],
                                    value: companies[counter],
                                    id: companies[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 generateQuery(requestString, listname) {
    var returnValue = "";

    requestString = encodeURIComponent(requestString);

    switch (listname) {

        case "VisitorRegistration":
            returnValue = "contains('" + requestString + "', CompanyNew)" + "&$select=CompanyNew";
            break;
    }
    
    return returnValue;
    
}

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

Answer 2

Resolved the issue by updating the code:

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

function initializeAutoComplete(varTextBoxId, listname) {
    console.log("initializeAutoComplete function triggered!");

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

        source: function (request, response) {

            var query = generateQuery(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) {
                    var companyResults;
                    var companies = [];
                    companyResults = groupBy(data.d.results,'CompanyNew');

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

                    var counter = -1;

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


                        switch (listname) {
                            case "VisitorRegistration":
                                counter++;
                                if (counter > companyResults.length){
                                    return;
                                }
                                return {
                                    label: companies[counter],
                                    value: companies[counter],
                                    id: companies[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 generateQuery(requestString, listname) {
    var returnValue = "";

    requestString = encodeURIComponent(requestString);

    switch (listname) {

        case "VisitorRegistration":
            returnValue = "contains('" + requestString + "', CompanyNew)" + "&$select=CompanyNew";
            break;
    }
    
    return returnValue;
    
}

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

How to prevent a Javascript Ajax call from retrieving the same string repeatedly from an XML file?

Answer №1

Similar questions

Ways to eliminate the design from a previously selected list item

Discovering whether an ID exists within a variable containing HTML code

Launching a modal using a method in Vue.js that includes constantly changing content

My Discord.JS bot seems to be moving at a snail's pace, and I can

Is there a way to bring together scrolling effects and mouse movement for a dynamic user

What could be causing the <img src= ' '/> tag to malfunction in Express?

Is there a specific explanation as to why ng-repeat-start is not functioning properly even with the most recent version of AngularJS?

The HTML button with Google's material-icons appears noticeably small when displayed on mobile devices

Choosing a portion of a polyline - Google Maps Application Programming Interface

Execute a PHP function when a post is clicked using JavaScript

React Native displaying identical path

What could be causing the issue of angular data-binding not functioning properly in conjunction with jquery

Firebase Firestore is returning the dreaded [object Object] rather than the expected plain object

Content not refreshing when closing and reopening Highslide iframe

Please execute the npm install command to install the readline-sync package in order to fix the error in node:internal/modules/c

Editing content: Certain challenges with generating and concentrating on a span

AngularJS sending unsupported media type to SpringMVC controller

Angular Date Filtering to Show dd-mm-yyyy Format

Using UI Bootstrap modal within a directive allows for the functionality of multiple modals, with the unique feature

Linking query branches without encountering the "Exceeded the number of hooks rendered during the previous render" error