Ajax call always return [object object] for textbox

1

Here is my code. Auto complete and assigning another textfield via SELECT works just fine. I tried to call another ajax call via function. It always return [object] error. Will you please help whats wrong? All I need is I want to return the xml result array length in another textbox.

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(document).ready(function() {
    $("#ctl00_ctl44_g_12456cdb_b65e_4696_b128_279228526bfe_ctl00_ctl02_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField").autocomplete({
      minLength: 2,
      source: function(request, response) {
        var term = request.term;
        var restUrl = _spPageContextInfo.siteAbsoluteUrl;
        restUrl += "/_api/web/Lists/GetByTitle('EmployeeList')/Items";
        restUrl += "?$select=Employee_Number,Employee_Name,Email_Address,Advisor_Manager&$filter=substringof('" + term + "',Employee_Name)";
        $.ajax({
          contentType: "application/json;odata=verbose",
          headers: {
            "accept": "application/json;odata=verbose"
          },
          url: restUrl,
          dataType: 'json',
          crossDomain: true,
          success: function(data) {
            response($.map(data.d.results, function(value, key) {
              return {
                label: value.Employee_Name,
                object: value
              };
            }));
          }
        });
      },
      select: function(event, ui) {
        var data = ui.item.object;
        $("#ctl00_ctl44_g_12456cdb_b65e_4696_b128_279228526bfe_ctl00_ctl02_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField").val(data.Employee_Number);
        getCountEmployees(data.Employee_Number);
      }
    });

    function getCountEmployees(EmpCode) {
      $.support.cors = true;
      $.ajax({
        url: 'http://services.appserver.com/myreportee/' + EmpCode,
        type: "GET",
        crossDomain: true,
        dataType: "json",
        headers: {
          "Accept": "application/json; odata=verbose"
        },
        xhrFields: {
          withCredentials: true
        },
        success: function(data) {
          var jqueryXml = $(data);
          $('#ctl00_ctl44_g_12456cdb_b65e_4696_b128_279228526bfe_ctl00_ctl02_ctl04_ctl00_ctl00_ctl04_ctl00_ctl00_TextField').val(data.d.results);
        },
        error: function(err) {
          $('#ctl00_ctl44_g_12456cdb_b65e_4696_b128_279228526bfe_ctl00_ctl02_ctl04_ctl00_ctl00_ctl04_ctl00_ctl00_TextField').val(err);
        }
      });
    }
  });
</script>
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

I formatted the code (auto format hopefully it didn’t break anything).

It is very hard to help when we don’t have access to the data coming back from the API. What does logging jqueryXml give you?

1 Like
4

Thanks for confirmation. Here are the two errors I get: Access to XMLHttpRequest at … from origin ‘…’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
GET jquery-1.12.4.js:10254 GET … net::ERR_FAILED

However I have added in my application web.config the following entries already

<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />  
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
5

Is that an IIS config file or what? I don’t know much about how to set up such a server I’m afraid.

https://enable-cors.org

edit: You can use a CORS proxy for testing, but it shouldn’t be used in production.

6

I am sure its CORs part is taken care. I have another function to autopopulate working just fine.:

Hi, I have a perfectly working code for auto populate textbox via rest api(it populates after 2 characters typed). Can you assist me on modifying the same api code to find out the total length of array(/total companies) and assign to textbox val something like ("#TotalCompany").val(...) I currently have autopopulate companies ("#Company").autocomplete working just fine.

$(document).ready(function () {
                      var baseServiceUrl = 'http://services.appserver.com/';
                      $("#Company").autocomplete({
                                         minLength: 2,
                                         source: function (request, response) {
                                          $.getJSON(baseServiceUrl + '/company/name/' + request.term + '/?callback=?',
                                          {
                                                       contextKey: function () {
                                                      // applies to associated parties
                                                     var key = $(this).parent().parent().find('.type').val();
                                                     if (key !== "--Select--" && key !== "")
                                                              key = key === "O" ? "Company" : "Company";
                                                      else
                                                              key = "";

                                                     return key;
                                             },
                                             format: "json"
                                       },
                                       function (data) {
                                                         response($.map(data,
                                                         function (item) {
                                                                                   return {
                                                                                                   label: item['Company'].replace(/&amp;/g, '&'),
                                                                                                   value: item['Company'].replace(/&amp;/g, '&')
                                                                                                }
                                            }));
                          }).sort();
                 }

        });
});

The web service API return something simillar to the script below:

…

…

…

Please let me know if you need more details Greatly appreciated any help

7

sorry I have now verified it with getJSON and the url data is showing in fiddler however the data is xml array, its not with JSON format and hence data.Lengh cant be calculated.

$.getJSON(‘http://services.myportal.com/Comany/Name’, function(data) {
//var data_length = data.length;
//alert(data_length);
});

image
how can I get the length of array? All I need is total number of records. however xml data formating issue is not giving me the length. Please help