If I have HTML such as this:
<ul>
<li id="id1">Some Text</li>
<li id="id2">Other Text</li>
<-- more items could be here -->
</ul>
How can I create a an array containing JSON object with the properties of each list item in the list, something like:
var itemsData = [
{
"id" : id,
"name" : name
},
{
"id" : id,
"name" : name
}
]
Where id and name equal to $(this).attr('id') and $(this).text() where $(this) refers to a single li item.
itemsData = [];
$('ul > li').each(function(){
itemsData.push({"id" : this.id, "name" : $(this).text()})
});
DEMO (see output on console)
By using .each:
var itemsData = [];
$('li').each(function() {
var $this = $(this);
itemsData.push({
id: $this.attr('id'),
name: $this.text()
});
});
console.log(itemsData);
var arr = new Array();
$("ul li").each(function(index){
arr[index]['id'] = $(this).attr('id');
arr[index]['name'] = $(this).attr('name');
});
Related
I'm trying to convert something like this HTML snippet:
<ul>
<li><span>Frank</span><img src="pic.jpg"></li>
<li><span>Steve</span><img src="pic2.jpg"></li>
</ul>
into a JavaScript objects that contain the name and the image's url. How can I do that?
Use map() method
var res = $('ul li').map(function() { // select all li and iterate
// return as required format of array elemnt
return {
name: $('span', this).text(), // get text in span
src: $('img', this).attr('src') // get src attribute
}
}).get(); // get array from jquery object
console.log(res);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><span>Frank</span>
<img src="pic.jpg">
</li>
<li><span>Steve</span>
<img src="pic2.jpg">
</li>
</ul>
UPDATE : If you want to generate an object which has key as span text and value as src attribute then use each() method and iterate over elements and generate object.
var res = {};
$('ul li').each(function() { // select all li and iterate
res[$('span', this).text().trim()] = $('img', this).attr('src');
})
console.log(res);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><span>Frank</span>
<img src="pic.jpg">
</li>
<li><span>Steve</span>
<img src="pic2.jpg">
</li>
</ul>
var objs = document.querySelectorAll('.to-js-obj li');
var objs_arr = [];
if (objs) {
for (var i = 0; i < objs.length; i++) {
var name = objs[i].querySelector('span').innerText;
var url = objs[i].querySelector('img').src;
objs_arr.push({
name: name,
src: url
});
}
console.log(JSON.stringify(objs_arr));
}
<ul class="to-js-obj">
<li><span>Frank</span>
<img src="pic.jpg">
</li>
<li><span>Steve</span>
<img src="pic2.jpg">
</li>
</ul>
Using jQuery
var $list = $('ul'), // get the list (ideally, add an ID)
$listItems = $list.find('li'); // find list items
if( $listItems.length > 0 ) { // if list items exist
var images = []; // create empty array to store objects
$.each( $listItems, function( index ) { // loop through the list items
var $item = $( $listItems[index] ); // save item as jQuery element
var name = $item.find('span').text(); // Get name from span
var imageSrc = $item.find('img').attr('src'); // Get img src
images[index] = {}; // Create new object in array
images[index].name = name; // Add name
images[index].imageSrc = imageSrc; // Add source
});
}
Returns
[Object {
imageSrc: "pic.jpg",
name: "Frank"
}, Object {
imageSrc: "pic2.jpg",
name: "Steve"
}]
You can use this:
var image_pairs = [];
$("ul li").each(function() {
image_pairs.push({
name: $(this).find("span").text(),
url: $(this).find("img").attr("src")
});
});
console.log(image_pairs);
<ul>
<li><span>Frank</span><img src="pic.jpg"></li>
<li><span>Steve</span><img src="pic2.jpg"></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I am trying to create dynamic ul and li tags with <a> inside it. I am getting firstName is not defined error.
FIDDLE
var sData= [];
var temp = {
"firstName": 'Steve',
"route": 'url'
};
sData.push(temp);
console.log(sData);
var cList = $('ul#sParts');
$.each(sData, function(i) {
var li = $('<li/>')
.appendTo(cList);
var aaa = $('<a/>')
.text(firstName[i])
.href(route[i])
.appendTo(li);
});
<div class="row">
<ul id="sParts">
</ul>
</div>
'firstName' or 'route' are properties of supercededData. So you need to define them as a part of the array.
$.each(supercededData, function(i) {
var li = $('<li/>')
.appendTo(cList);
var aaa = $('<a/>', {
text : supercededData[i].firstName,
href : supercededData[i].route })
.appendTo(li);
});
Working example : https://jsfiddle.net/rwgoxLg2/2/
I have two lists in this format:
<ul id="filters" class="option-set button-group" data-filter-group="kategorie">
<li>
Corporate Design
</li>
<li>
Webdesign
</li>
</ul>
In Javascript there is a click-function which addes or removes the class "isotopeactive" to the link-element:
$('#filters a').click(function(){
var $this = $(this);
if ( $this.hasClass('isotopeactive') ) {
$this.removeClass('isotopeactive');
}else{
$this.addClass('isotopeactive');
}
The problem is to get all the data-filter - data from all elements that are "isotopeactive" into one variable. My first try was this, but it does not work..
var filterValue = '';
var i = 0;
$( ".isotopeactive" ).each(function() {
filterValue += $this.attr('data-filter');
i++;
});
In the end i want to get something like this:
filterValue => ".corporatedesign .webdesign"
Any suggestions? Thanks! :)
I'd suggest:
var data = $('.isotopeactive').map(function(){
return this.dataset.filter;
}).get();
For those, older, browsers that don't implement dataset:
var data = $('.isotopeactive').map(function(){
return this.getAttribute('data-filter');
}).get();
Or:
var data = $('.isotopeactive').map(function(){
return $(this).data('filter');
}).get();
This will return an array of values to the data variable.
References:
JavaScript:
Element.getAttribute().
HTMLElement.dataset.
jQuery:
data().
get().
map().
Here is html code :
<ul id="sortable">
<li id="attachments[183]"></li>
<li id="attachments[196]"></li>
<li id="attachments[145]"></li>
<li id="attachments[545]"></li>
</ul>
Here is JavaScript/jQuery code :
var query = {
'action' : 'save-attachment-order',
'nonce' : '8cb16e3927',
'post_id' : 89,
}
I want to get li IDs and make it this var like this
var query = {
'action' : 'save-attachment-order',
'nonce' : '8cb16e3927',
'post_id' : 89,
'attachments[183]' : 2,
'attachments[196]' : 3,
'attachments[145]' : 1,
'attachments[545]' : 4
}
Starting with this object:
var query = {
'action' : 'save-attachment-order',
'nonce' : '8cb16e3927',
'post_id' : 89,
}
You can add the ids as new properties with this:
$("#sortable li").each(function(){
query[this.id] = 0; // not sure where you're getting the values from!
});
Now that you explained that the values are supposed to represent the order, you may want to use this instead (assuming jQuery UI):
var order = $( "#sortable" ).sortable( "toArray" );
for(var i=0; i<order.length; i++) {
query[order[i]] = i+1;
}
Alnitak's answer should also work, as the the list items will be in order anyway.
var ids = [];
$('li').each(function() {
ids.push($(this).attr('id'));
});
This will add the IDs to query, with the value being the element's relative position in the list:
$('#sortable > li').each(function(ix) {
query[this.id] = ix + 1;
});
See http://jsfiddle.net/alnitak/qddc5/
try this
object.property = value;
so your code become
$('#sortable li').each(function() {
query[$(this).attr('id')]= 'vaule u want';
});
var ids = $("#sortable li").map(function(){
return this.id;
}).get();
This will fetch all the li ids as an array..
Given the following structure:
<ul>
<li data-conference="Conference1" >Spain</li>
<li data-conference="Conference1" >France</li>
<li data-conference="Conference1" >Germany</li>
<li data-conference="Conference1" >Italy</li>
<li data-conference="Conference2" >Austria</li>
<li data-conference="Conference2" >Poland</li>
<li data-conference="Conference3" >Russia</li>
<li data-conference="Conference3" >USA</li>
<li data-conference="Conference3" >China</li>
</ul>
what is the best way (with jQuery), considering performance, to rearrange this into this:
<ul>
<li>Spain</li>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
<ul>
<li>Austria</li>
<li>Poland</li>
</ul>
<ul>
<li>Russia</li>
<li>USA</li>
<li>China</li>
</ul>
Thanks!
I think the overall question (group elements by attribute) is good, you just should have put more effort into trying to solve it yourself.
Anyways, grouping elements by an attribute is quite simple. You can create an attribute value -> [element, ...] map, which can be done with an object:
var groups = {};
$('li[data-city]').each(function() {
var attr = $(this).attr('data-city'),
group = groups[attr];
if(!group) {
group = groups[attr] = [];
}
group.push(this);
});
Now you have a collection of lists of DOM elements. You can iterate over the collection and create the HTML lists accordingly.
For example:
for(var group in groups) {
var $list = $('<ul />');
$list.append(groups[group]);
// now append $list somewhere
}
Have a look at Working with Objects [MDN] to get more information about how to process objects.
It's also trivial to do this without jQuery, as long as you have references to the elements, for example as a NodeList. Instead of using .each you can then use a "normal" for loop to iterate that list.
Unless you have a insane amount of cities in those lists I wouldn't worry about performance. The only performance consideration I would take is to avoid repaint / reflows by minimizing writing to the DOM. I think code clarity is much more important in this use case.
That being said I'd implement this with something like this - http://jsfiddle.net/XWufy/.
Here you go:
(function () {
var $list = $( '#list' );
var lists = {};
var $newLists = $();
$list.children().each( function () {
var city = $( this ).data( 'city' );
if ( !lists[ city ] ) lists[ city ] = [];
lists[ city ].push( this );
});
$.each( lists, function ( city, items ) {
var $newList = $( '<ul />' ).append( items );
$newLists = $newLists.add( $newList );
});
$list.replaceWith( $newLists );
}());
Live demo: http://jsfiddle.net/rjt9W/6/
Btw, the code assumes that the list has an ID of "list". Replace the selector in this line
var $list = $( ... );
so that it properly selects your UL element.
Use the data attribute as an object property to sort them, then loop over them to construct the new html. this should get you started:
var list = {};
// for each item
list[item.data('city')] = item.text();
// for each property of list
var ul = $('<ul>');
// for each listItem in current list
var li = $('<li>').text(listItem);
ul.append(li);
try this:
<ul id="first"></ul>// you can create the ul tags by using JavaScript
$("li").each(function(){
data = $(this).attr("data");
if (data == "Conference1") {
txt = $(this).text();
$("<li>" + txt + "</li>").appendTo("ul#first");
}
})
Try this:
var list = [];
var $div = $('#my_container_div');
$('li[data-city]').each(function() {
var $this = $(this), data = $this.attr('data-city');
list[ data ] = list[ data ] || [];
list[ data ].push( $this.text() );
});
for(var data in list) {
var $ul = $div.append('<ul/>');
for(var li in list[data]) {
$ul.append('<li>' + list[data][li] + '</li>');
}
}