Get data-attribute value and HTML in array

html data attribute jquery
html data attribute array
html data attribute object
css data attribute
jquery get data attribute
json array in data attribute
get data from html
jquery update data attribute

I have the following tag in my html and I need to select the data-id value and the inner html value into an array.

How can I achieve this in either Jquery or Javascript

<li class="dual-listbox__item" data-id="1">Politieacademie</li>
<li class="dual-listbox__item" data-id="3">IBM</li>
<li class="dual-listbox__item dual-listbox__item--selected" data-id="5">Energias de Portugal</li>

You can use $('.dual-listbox__item').each() to achieve this:

var dataId = [];
var nHTML = [];
$('.dual-listbox__item').each(function(){
  dataId.push($(this).data('id'));
  nHTML.push($(this).text());
});
console.log(dataId);
console.log(nHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dual-listbox__item" data-id="1">Politieacademie</li>
<li class="dual-listbox__item" data-id="3">IBM</li>
<li class="dual-listbox__item dual-listbox__item--selected" data-id="5">Energias de Portugal</li>

Using data attributes, parse, and make sure you're using single quotes around the brackets and double quotes inside the brackets. gistfile1.txt. <!DOCTYPE html>. <  We simply use attribute binding to add and set a value for a data attribute. According to Angular docs: Attribute binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix attr, followed by a dot (.) and the name of the attribute.

You can use .map() along with .get() to convert it to basic array

var arr = $('li.dual-listbox__item').map(function() {
  return {
    id: $(this).data('id'),
    text: $(this).html()
  };
}).get();

console.log(arr)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dual-listbox__item" data-id="1">Politieacademie</li>
  <li class="dual-listbox__item" data-id="3">IBM</li>
  <li class="dual-listbox__item dual-listbox__item--selected" data-id="5">Energias de Portugal</li>
</ul>

You can use arrays and hashes in HTML5 data attributes. Use JSON , Today we look at how to use HTML5 data attributes. the data, and it would cause problems if the name ever became a standard HTML attribute. Our JavaScript code would look for an element with the ID msglist. A little string parsing would find a class starting with user_, assume “bob” is the ID and  How to get and set data attribute values. Using the jQuery data attr () method, you can get and set data attribute values easily from selected html elements. The jQuery attr () method is used to get or set attributes and values of the selected html elements. For get an attribute’s value use the below syntax.

Select the elements, loop them using map and you got your array. Below will return an array of objects holding the data you want

const res = Array.from(document.querySelectorAll('.dual-listbox__item')).map(e => ({
  dataId: e.dataset.id,
  innerHTML: e.innerHTML
}));

console.log(res);
<li class="dual-listbox__item" data-id="1">Politieacademie</li>
<li class="dual-listbox__item" data-id="3">IBM</li>
<li class="dual-listbox__item dual-listbox__item--selected" data-id="5">Energias de Portugal</li>

How to Use HTML5 Data Attributes, The HTML class attribute is not meant to store data like this. To get rid of these issues, HTML5 has introduced custom data attributes. Next, let's dive into the basics of data attributes and learn how to access their values in attribute into a suitable type like numbers, booleans, objects, arrays and null. jQuery Get Data Attribute Method. jQuery offers various method to get data attribute values, Here You can learn two simple method to get data-any attribute of selected html Elements. Here you can see that two type of get data attribute methods are :-.data(‘attribute’) method.attr(‘attribute full name’) method.data(‘attribute’) method

How You Can Use HTML5 Custom Data Attributes and Why, Store arbitrary data associated with the matched elements or return the value at the Get the value of an attribute for the first element in the set of matched elements or set in the DOM based on passed argument(s) or created by passing an HTML string. Encode a set of form elements as an array of names and values. JSON array in html element data attribute. I was writing some view code today where jQuery would pick-up values of button data attribute (array of ids) and make Ajax calls to to server based on values. What that Ajax call is is not important. The important part was how to actually render array to a data html attribute.

get data attribute | Search Results, Custom Data Attributes allow you to add your own information to tags in HTML. How to get the data attributes of an element using JavaScript ? HTML |  The getAttribute () method returns the value of the attribute with the specified name, of an element. Tip: Use the getAttributeNode () method if you want to return the attribute as an Attr object. Browser Support. #N#getAttribute () element .getAttribute ( attributename) Parameter Values. Required. The name of the attribute you want to get the

HTML, Find out how you can easily handle HTML5 data- attributes both ways, to access the attributes data-content3 and set its/their html() value. I am attempting to store an array in the HTML data tag. Store and use an array using the HTML data tag and jQuery. How do I check if an array includes a value

Comments
  • You can use .map for something like this - add an example to the question of what you want the array to look like when its done.
  • Also need the inner HTML value in array.
  • Actually I have another level higher up. Can you please suggest how to retreive the data-id and the value from this. <ul class="dual-listbox__selected"><li class="dual-listbox__item dual-listbox__item--selected" data-id="1">Politieacademie</li></ul> I cannot rely on dual-listbox__item as it is selecting other entities from the DOM. I need to get all items from "dual-listbox__selected"
  • Use correct selector var arr = $('ul.dual-listbox__selected li.dual-listbox__item.dual-listbox__item--selected').map(function() { return { id: $(this).data('id'), text: $(this).html() }; }).get();
  • eww .getAttribute(...).
  • What else would you use @KarelG -- ah I see, dataset... Yeah, would be possible..
  • using .dataset is more cleaner. That .getAttribute() is an old thing and not reliable (different behavior throughout multiple spec versions). Moreover, a best practice is to use hasAttribute() beforehand. You missed an upvote here :P
  • Not for an upvote, but you're right :-) @KarelG I was to state that it's supported in IE10 and below, but the rest of my code isn't as well... :-)