Develop Reference

How can I create json output from deep li structure

I have ol li structure as html and I want to create JSON from that but my code doesn't create that JSON I need. Can any one please help me to solve it?
I need to create JSON like that
[
{"en":"Menu1","enlink":"#enlink1","tr":"Menü 1","trlink":"#trlink1","data":[
{"en":"Menu1-1","enlink":"#enlink1-1","tr":"Menü 1-1","trlink":"#trlink1-1","data":[
{"en":"Menu1-1-1","enlink":"#enlink1-1-1","tr":"Menü 1-1-1","trlink":"#trlink1-1-1"},
{"en":"Menu1-1-2","enlink":"#enlink1-1-2","tr":"Menü 1-1-2","trlink":"#trlink1-1-2"}
]},
]},
{"en":"Menu2","enlink":"#enlink2","tr":"Menü 2","trlink":"#trlink2","data":[
{"en":"Menu2-1","enlink":"#enlink2-1","tr":"Menü 2-1","trlink":"#trlink2-1"},
{"en":"Menu2-1","enlink":"#enlink2-1","tr":"Menü 2-1","trlink":"#trlink2-1"}
]},
{"en":"Menu3","enlink":"#enlink3","tr":"Menü 3","trlink":"#trlink3"}
]
And my sample codes are..
var buildJson = function (root){
if(!root){
root='#domenu-en';
}
var result = [];
$(' ol > li ',root).each(function() {
if($(this).children("ol").length){
result.push({"en":$(this).attr("data-en"),"data":buildJson($(this))});
//return false;
} else{
result.push({"en":$(this).attr("data-en")});
}
});
return result;
}
$('#results').val(JSON.stringify(buildJson()))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="domenu-en">
<ol>
<li data-enlink="#enlink1" data-en="Menu1" data-trlink="#trlink1" data-tr="Menü 1">
<ol>
<li data-enlink="#enlink1-1" data-en="Menu1-1" data-trlink="#trlink1-1" data-tr="Menü 1-1">
<ol>
<li data-enlink="#enlink1-1-1" data-en="Menu1-1-1" data-trlink="#trlink1-1-1" data-tr="Menü 1-1-1">
</li>
<li data-enlink="#enlink1-1-2" data-en="Menu1-1-2" data-trlink="#trlink1-1-2" data-tr="Menü 1-1-2">
</li>
</ol>
</li>
</ol>
</li>
<li data-enlink="#enlink2" data-en="Menu2" data-trlink="#trlink2" data-tr="Menü 2">
<ol>
<li data-enlink="#enlink2-1" data-en="Menu2-1" data-trlink="#trlink2-1" data-tr="Menü 2-1">
</li>
<li data-enlink="#enlink2-1" data-en="Menu2-1" data-trlink="#trlink2-1" data-tr="Menü 2-1">
</li>
</ol>
</li>
<li data-enlink="#enlink3" data-en="Menu3" data-trlink="#trlink3" data-tr="Menü 3">
</li>
</ol>
</div>
<textarea id="results" style=" height: 279px;"></textarea>

I found the solution its very simple, in case any one needed I like to share it. If we tell the jQuery select first li as ol:first >li then its generate same hierarchy as li structure.
var buildJson = function (root){
if(!root){
root='#domenu-en';
}
var result = [];
$('ol:first > li ',root).each(function() {
var itemdata = {};
$.each($(this).data(), function(key, value) {
itemdata[key] = value;
});
if($(this).children("ol").length){
itemdata["data"] = buildJson($(this));
}
result.push(itemdata);
});
return result;
}

The main difference seem to be that you don't include the other data- attributes other than the data-en. You can iterate all of the data- attributes on an element with $.each($(this).data(), function(key, value) {}).
In your case that would be something like:
$(' ol > li ',root).each(function() {
var itemdata = {};
$.each($(this).data(), function(key, value) {
itemdata[key] = value;
});
if($(this).children("ol").length){
itemdata["data"] = buildJson($(this));
}
result.push(itemdata);
});
That should give you an equal JSON result. The properties may be in a different order, but that shouldn't matter for JSON (for example: your JSON example had the order en, enlink, tr and trlink, while I got tr, trlink, en and enlink in my example. The order of the menu items in the list is still the same (1, 1-1, 1-2, etc.).
A working example at https://jsfiddle.net/gpctm9d1/

click menu <li> and generate other submenu

Friends have a problem.
When clicking a link from a menu, I need to generate below the selected sub-menu item.
So far I can send the request via ajax, and generate a sub-menu, but this sub-menu always appears in the first position:
HTML CODE (simple menu)
<ul>
<li>Item 1
<ul id="city"></ul>
</li>
<li>Item 2
<ul id="city"></ul>
</li>
<li>Item 3
<ul id="city"></ul>
</li>
<li>Item 4
<ul id="city"></ul>
</li>
<li>Item 5
<ul id="city"></ul>
</li>
</ul>
JS CODE:
$('.region_id').on('click', function(event) {
event.preventDefault();
$.get('{!! url("filter_city") !!}', {id : $(this).attr('data-id'), token: $('input[name="_token"]').val() }, function(data) {
var cities = $('#city');
cities.empty();
$.each(data, function(key, value) {
cities.append($("<li></li>").text(value));
});
});
});
Result I get when clicking any option
As I can achieve what I want? Greetings from Chile

Identifier in HTML must be unique. You can use a common class and then traverse DOM using various methods.
Here's an example, I have used city as CSS class instead of ID. then the relevant element can be identified using any of these methods.
var cities = $(this).next('.city');
//var cities = $(this).siblings('.city');
//var cities = $(this).closest('li').find('.city');
HTML
<ul>
<li>
Item 1
<ul class="city"></ul>
</li>
</ul>
Script
$('.region_id').on('click', function(event) {
event.preventDefault();
var cities = $(this).next('.city');
$.get('{!! url("filter_city") !!}',
{
id : $(this).data('id'),
token: $('input[name="_token"]').val()
},
function(data) {
cities.empty();
$.each(data, function(key, value) {
cities.append($("<li></li>").text(value));
});
}
);
});
I would recommend you to use .data() instead of attr() to fetch data-* custom attribute value.
var id = $(this).data('id');

Jquery Mobile Duplicating Autodividers

I have a list but when I try to generate autodividers for that list I'm getting duplicate dividers. Here is the code for the ul and the relevant script:
<div data-role="content">
<ul data-role="listview" id="ScheduleList" data-autodividers="true">
<li time="3:30PM">Event 1</li>
<li time="3:30PM">Event 2</li>
<li time="4:30PM">Event 3</li>
<li time="3:30PM">Event 4</li>
<li time="3:30PM">Event 5</li>
<li time="4:30PM">Event 6</li>
</ul>
</div>
</div>
<script>
$(document).on("pageinit", "#ScheduleDay", function(){
$("#ScheduleList").listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.attr('time');
return out;
}
}).listview('refresh');
});
</script>
Here is the code in JSFiddle: http://jsfiddle.net/4fGT6/65/
I know that I could reorder the list items in the html and that would eliminate the duplicate autodividers, but if I made the list to be generated dynamically from user inputs then I couldn't manually reorder the html.
Is there a way to solve this if the list had been generated dynamically?
Thanks.

First step, sort list items based on data-time attribute (I added data to facilitate reading values - data attribute is ignored by user agent, thus it won't mess up your code).
I used the below simple code, yet genius, made by #undefined.
Update:
Thanks to #Keir Lavelle for reviewing the code of sorting li elements.
var listview = $('#ScheduleList'),
listitems = listview.children('li');
listitems.detach().sort(function (a, b) {
var adata = $(a).data('time');
var bdata = $(b).data('time');
/* return (adata > bdata) ? (adata > bdata) ? 1 : 0 : -1; */
return (adata > bdata) ? 1 : -1;
});
listview.append(listitems);
Second step, apply autodividers dynamically.
$("#ScheduleList").listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.jqmData('time');
return out;
}
}).listview('refresh');
Demo
Credits to #undefined and #Keir Lavelle

table row filtering with js or jquery

im not so close with js or jquery, but i have a table with some entries. now i'd like to filter this table by a list on the left side.
i wrote an example. http://jsfiddle.net/B2Muh/2/
<ul class="filter">
<li class="filter-header"> Filter argument 1: </li>
<li> Yahoo </li>
<li> Google </li>
<li class="filter-header"> Filter argument 2: </li>
<li> GPH_est </li>
<li> Q_est </li>
</ul>
<div class="tableResult">
<table class="table">
<tr>
<td>Yahoo</td>
<td>GPH_est</td>
</tr>
<tr>
<td>Google</td>
<td>Q_est</td>
</tr>
</table>
</div>
the example is very simple. so what i want is, that i can click on any filter argument 1, set this active, and the table shows all entries with the first argument, then if i click on any filter argument 2, the table only shall show entries with the first and the second argument.
i use python and django.
i hope anyone can help me, because i have no idea :)
EDIT: now i have added the markups

Mocked up the functionaltiy you requested, using some slow, simple, exhaustive checks. --http://jsfiddle.net/B2Muh/3/
$(function () {
$filterArgs = $("ul li").filter(function () {
var txt = $(this).text();
return txt.indexOf("Filter") < 0;
});
$filterArgs.click(function () {
$(this).toggleClass('active');
$("table tr").hide();
$("table tr td").each(function () {
$rowData = $(this);
$filterArgs.filter(".active").each(function () {
if ($rowData.text() == $(this).text()) {
$rowData.parent().show();
return false;
}
});
});
});
});

I've written a sample code. I think this is what you want.
$('body').on('click','li',function(){
var filterText=$(this).html().trim();
var splicedTextArray=filterText.split(" ");
var filter=splicedTextArray[0].toLowerCase();
$('tr').each(function(index,value){
var valueText=$(this).find('td:first').html();
var isRegexmatch=valueText.toLowerCase().indexOf(filter);
if(isRegexmatch<0)
{
$(this).hide();
}else
{
$(this).show();
}
});
});
See it in action on JSFiddle

set order to jquery sortable

I use jquery draggble function for unorderd list (ul) and face a problem of getting the order of items after it changed and setting the order ofter page is loaded.Suppose we have the following code :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('.secondblock').sortable({axis:'y'});
$(".block").sortable({
axis: 'y',
update: function(event, ui) {// order changed
var order = jQuery(this).sortable('toArray');
// set this order to .secondblock
}
});
});
</script>
</head>
<body>
<ul class="block" type="none">
<li id = "one">1</li>
<li id = "two">2</li>
<li id = "three">3</li>
<li id = "four">4</li>
<li id = "five">5</li>
</ul>
<ul class="secondblock" type="none">
<li id = "one">1</li>
<li id = "two">2</li>
<li id = "three">3</li>
<li id = "four">4</li>
<li id = "five">5</li>
</ul>
</body>
Are there any possible solutions?

First, you shouldn't have the same id appear twice in a document. That will cause all kinds of problems.
Instead, set a data-attribute on the items in the second list to reflect corresponding items in the first list:
<ul class="block" type="none">
<li id = "one">1</li>
<li id = "two">2</li>
<li id = "three">3</li>
<li id = "four">4</li>
<li id = "five">5</li>
</ul>
<ul class="secondblock" type="none">
<li data-block-id = "one">1</li>
<li data-block-id = "two">2</li>
<li data-block-id = "three">3</li>
<li data-block-id = "four">4</li>
<li data-block-id = "five">5</li>
</ul>
Then reflecting the sort of the first list in the second list is simple:
$('.block').sortable({update: sortOtherList});
function sortOtherList(){
$('.block li').each(function(){
$('.secondblock [data-block-id=' + $(this).attr('id') + ']')
.remove()
.appendTo($('.secondblock'));
});
}
See it working here: http://jsfiddle.net/6HKZG/2/

Faust's looks better to me. Mark it if it's what you wanted.
Yes. I feel like I need more information, but I had to do almost the exact same thing recently.
First, you want to extend the javascript array object with a sorting algorithm. Here is what I use:
Array.prototype.move = function (old_index, new_index) {
if (new_index >= this.length) {
var k = new_index - this.length;
while ((k--) + 1) {
this.push(undefined);
}
}
this.splice(new_index, 0, this.splice(old_index, 1)[0]);
return this; // for testing purposes
};
source Move an array element from one array position to another
Then, what I would do is use this along with an OldPosition/NewPosition function to get the index of the element before and after the sort, and use this method to move the object in the array.
I think JQuery sort let's you get information about the array before and after the sort
ex:
$('li').presort(function() {
window.oldindex = $(this).index();
});
$('li').postsort(function() {
window.newindex = $(this).index();
array.move(oldindex,newindex);
});
If you're just looking to make .secondblock match .block after sort, you can do this:
source: http://jqueryui.com/demos/sortable/#events
$( ".selector" ).sortable({
start: function(event, ui) { //Get the order of the .block list items before dragging }
});
$( ".selector" ).sortable({
stop: function(event, ui) { //Get the new order of the list items after dragging. Compare the two orders and sort .secondblock to match block }
});