The 'in' operand is invalid

I am encountering a JavaScript error:

"[object Object]" TypeError: invalid 'in' operand a

whenever I attempt to perform an AJAX request using the following code:

.data("ui-autocomplete")._renderItem = function( ul, item ) {
      return $( "<li class='submitmore' ></li>" )
      .data( "item.autocomplete", item )
      .append('<p class="searchdata" onClick="asd(\'' + item + '\')">'+item.value+'<div class="clear"></div>');
};

function asd(itemnew){

        console.log(itemnew);

        $.each(itemnew, function (key, value) {
              console.log("item : "+ key + " value : " + value);
        });

}

Answer №1

Here is a suggestion for you:

.data("ui-autocomplete")._renderItem = function( ul, item ) {
      return $( "<li class='submitmore' ></li>" )
      .data( "item.autocomplete", item )
      .append('<p class="searchdata">'+item.value+'<div class="clear"></div>');
};

$(document).on("p.searchdata").click(function() {
    asd($(this).closest("li.submitmore").data("item.autocomplete"));
}

Instead of trying to insert the item directly into the onclick attribute, utilizing the .data() method ensures that the click handler can retrieve it from the stored data.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Uncertain about the process of upgrading this chart with the latest array modifications

My code includes a function that updates the data array with user input, which is used to create a bar graph. The issue I am facing is that while the data array in the chart gets updated upon user input, the chart itself does not. How can I ensure that the ...

Single parallax movement determined by the position of the mouse cursor, with no margins

Recently came across this interesting code snippet [http://jsfiddle.net/X7UwG/][1]. It displays a parallax effect when moving the mouse to the left, but unfortunately shows a white space when moving to the right. Is there a way to achieve a seamless single ...

Tips on incorporating negation in npm script's glob pattern usage?

I have been struggling to create a clean npm script that works properly. Every time I try, I either encounter an error in the console or the intended outcome doesn't occur. My goal is to remove all root JavaScript files except for certain config files ...

What is the best way to display elements in chronological order until a total of 30 elements have been displayed?

On my events website, I keep a database of upcoming events with unique id, title, and date (in the format Y-m-d). My goal for the page is: To display all events scheduled for today If there aren't at least 30 events today, to display events happeni ...

What is the best way to retrieve attributes from a through table using a query?

I am in the process of creating a straightforward shopping cart system. My structure includes a Cart model, a Product model, and a connection table called CartItems. Here are the associations: models.Cart.belongsToMany(models.Product, { through: 'Car ...

Using jQuery combogrid to automatically target and populate input box upon row selection

I have implemented combogrid functionality from https://github.com/powderblue/jquery-combogrid to display suggestions while typing. $(".stresses").combogrid({ url: '/index/stresssearch', debug: true, colModel: [{'col ...

Discovering the process of extracting a date from the Date Picker component and displaying it in a table using Material-UI in ReactJS

I am using the Date Picker component from Material-UI for React JS to display selected dates in a table. However, I am encountering an error when trying to show the date object in a table row. Can anyone provide guidance on how to achieve this? import ...

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

I'm still learning about Angular and JavaScript, so please bear with me if my questions seem silly. I've been trying to add a theme to my Angular project. When I include the entire code in index.html, everything works fine. However, when I move ...

Using Ajax to load TYPO3's News extension in version 9.5

I'm exploring the possibility of loading the Details view of a news list via Ajax to improve user experience. Instead of having the entire page reload, I want the old detail to smoothly fade out while the list remains in place on the screen, with just ...

JQuery continuously firing off AJAX requests

Currently, I am experimenting with using a Jquery Ajax request to incorporate an AutoComplete feature. This involves utilizing ElasticSearch on the backend for data retrieval. This is what my autocomplete.html looks like: <!DOCTYPE html> <html l ...

Tip Sheet: Combining Elements from an Array of Objects into a Single Array

When I invoke the function getAllUsers() { return this.http.get(this.url); } using: this.UserService.getAllUsers().subscribe(res => { console.log(res); }) The result is: [{id:1, name:'anna'}, {id:2, name:'john'}, {id:3, name ...

Unspecified data output from jquery datepicker

I am currently utilizing a datepicker to select a date. I have implemented the jQuery datepicker, however, it is returning an undefined value. Can someone please assist me with this issue? My HTML CODE: <input type="text" class="form-control fromdate" ...

It seems like the method has already been executed despite encountering an unexpected end of JSON input error

Currently, I am utilizing the etherscan API to retrieve logs for certain events. Although my JSON parsing method seems quite traditional, an error is being thrown stating "unexpected end of JSON". function getEventHistory() { const topic0 = web3.util ...

Setting the x-api-key header with HttpInterceptor in Angular 4: A guide

I am attempting to use HttpInterceptor to set the header key and value, but I am encountering the following error: Failed to load https://example.com/api/agency: Response to preflight request doesn't pass access control check: No 'Access ...

What steps can I take to completely remove JavaScript from an HTML document?

To eliminate the <script> tags in the HTML, I can utilize regex just like this $html = preg_replace('#<script(.*?)>(.*?)</script>#is','', $html); While this approach works well, dealing with inline JavaScript require ...

Is it possible to use regex to replace all content between two dashes, including any new

I have a specific set of dashed markers that I am looking to update based on the content of $("#AddInfo"). If the field is not empty, I want to replace everything between the markers. Conversely, if $("#AddInfo") is empty, I need to remove all text betwe ...

Comprehending the inner workings of the reduce() method

After spending hours reading and watching videos to understand the reduce function, I finally had a breakthrough. It wasn't until I took a break, made some food, and came back to my computer that it all clicked. Now, I confidently grasp how the reduce ...

What is the best way to retrieve a default property from a JavaScript literal object?

In the following example, a JS object is created: var obj = { key1 : {on:'value1', off:'value2'}, key2 : {on:'value3', off:'value4'} } Is there a clever method to automatically retrieve the default valu ...

Utilizing Powershell with Ajax to retrieve a string (or potentially nothing) within a .NET MVC undertaking

I am currently developing a dashboard to display real-time information about a group of machines. Here is the PowerShell script I am using: param([string] $server) $services = Get-WmiObject win32_service -ComputerName $server | Select -Property Nam ...

Uploading Files Asynchronously in Asp.net

Despite the abundance of examples and samples available for asynchronously uploading files using code, I haven't been able to find one that works for me. I've tried placing the update panel, but unfortunately the File Uploader isn't functio ...