Uncaught TypeError: Cannot use ‘in’ operator to search for ‘length’

JavaScript
1

I have two JS files as shown below (page1.js) and (page2.js for reference included below). I am basically referring to the following JSON response while working :


{
	"webservice_status": {
		"status": "SUCCESS",
		"message": ""
	},

	"my_document_list": [{

			"doc1": "445",
			"doc2": "445",
			"doc3": "445",
			"doc4": "445",
			"content": "Some text here to display"
		}

	]
}

Here is my page1.js related work:

$("#mydoclist").on('rowclick', function (event) {
			row = event.args.rowindex;
			datarow = $("#mydoclist").jqxGrid('getrowdata', row);
			var response = JSON.stringify(datarow, null, 10);
			var docID  = datarow["doc_id"];
            self.getMyDocumentContents(docID);

   });

this.getMyDocumentContents = function (contentID_) {

                               
                var data = {
                      doc_id: contentID_
	        }

               app_.get(data, self.processContent, app_.processError, url_name);

               
}// End of getMyDocumentContents


this.processContent = function(data_,textStatus_,jqXHR_) {

      data_ = app_.convertResponse(data_,jqXHR_);
      console.log("Checking for actual data_ content:", data_); 
      console.log("Actual Data Length Check for data_ content:", data_.my_document_list.length); 
	
      // debugger;
          
      var collection = data_.my_document_list.length[0].content;
      console.log("Collection Check",collection);

      //debugger;

       var source = {
         localdata: collection,
         datafields: [{
         name: 'content',
         type: 'string'
       }],
      datatype: "array"
      };

            
      var dataAdapter = new $.jqx.dataAdapter(source, {

           loadComplete: function (records) {

                debugger;

                var html;
                
		  //Get data
            var records = dataAdapter.records;
		    console.log("Check for records:",records.length);
            var length = records.length;
            html = "<div style='margin: 10px;'><pre>" + records[0].content + "</pre></div>";
			$("#docContentPanel").jqxPanel('clearcontent');
            $("#docContentPanel").jqxPanel('append',html);

            },
            loadError: function (xhr, status, error) { },
            beforeLoadComplete: function (records) {

            }

           });

            // perform data binding
            dataAdapter.dataBind();

            var panel = $("#docContentPanel");
            var content = panel.html();
			panel.jqxPanel({ width: '750', height: '500', scrollBarSize: 20 });

 }// End of processContent

Here is my page2.js related work:

this.get = function (data_, done_, fail_, webServiceKey_) {

        // Lookup the requested web service URL
        var url = https://documentlookup.com:8443/getmydocuments;
        

        // Create the AJAX request.
        $_.ajax({
            data: data_,
            method: "GET",
            url: url
        })
        .success(done_)
        .error(fail_);
    };

// If the JSON data was returned with content type of "text/plain", parse as JSON before returning.
    this.convertResponse = function (data_, jqXHR_) {

        return (typeof(data_) === "object" ? data_ : JSON.parse(data_));
        
    };

Basically there is a list of rows displayed in a jqxgrid(not mentioned in the code below), when a user clicks on it
$(“#mydoclist”).on('rowclick gets called , which calls the following function:
getMyDocumentContents function: This function basically passes the doc_id inside data variable which is made
available for the following function:
processContent:
In this function, I am trying to show the content value of the my_document_list array in a jqxPanel.
Problem I am facing inside this function:
As can be seen, there are debugger I placed at various places which are currently commented except at one place
which is just below this line loadComplete: function (records) {
I don’t get any error above this line var dataAdapter = new $.jqx.dataAdapter(source, { , however, as soon as
I place it inside it, I get the following error:
Uncaught TypeError: Cannot use ‘in’ operator to search for ‘length’ in jquery-1.11.1.js:583 Where length is a numerical number which keeps on changing depending upon the length of value of content` of the above JSON response.
Could anyone tell me what’s going wrong? thanks in advance !
Just in case needed, here is the jQuery line #583 isArraylike function :

	
function isArraylike( obj ) {
	var length = obj.length,
		type = jQuery.type( obj );

	if ( type === "function" || jQuery.isWindow( obj ) ) {
		return false;
	}

	if ( obj.nodeType === 1 && length ) {
		return true;
	}

	return type === "array" || length === 0 ||
		typeof length === "number" && length > 0 && ( length - 1 ) in obj; // THIS is LINE 583 which throws error
}
2

A search for “jquery line 583 error” suggests that jQuery of various versions will throw an error at that line if you call it against a null object. In your case that suggests that the records variable is returning null. But I’m only searching, have very little JS experience.

3

Okay, thanks. Do you think it may be good to try other versions of jQuery?

4

I don’t think that the version of jQuery is relevant here.

Can you please link us to a test page that demonstrates the problem, so that a more thorough investigation can take place?

5

Thanks for your time. Appreciated. I was able to fix the bug by modifying this line var collection = data_.my_document_list.length[0].content; to var collection = data_.my_document_list.length;

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.