how to append nested li from JSON using jquery - javascript

I want to bring the json data to front end like in the picture.
How do i do it, here is my code. I want it nested like in the pic below.
This is how far i got with my code.
HTML:
</body>
<div id="active"></div>
</body>
JQuery
<script>
$.getJSON("active.json", function(result){
$.each(result, function(i, field){
var UniqueNames= $.unique(result.map(function (d) {
return d.gpanel;
}));
$("#active").append('<li>'+UniqueNames[i]+'</li>');
});
});
</script>
JSON:
[{"ID":"1","gpanel":"sfd","ptitle":"sdffd","panel":"1,2",
"free":"yes","fees":"0.00"},
{"ID":"2","gpanel":"sdfd","ptitle":"sdfds","panel":"1",
"free":"yes","fees":"0.00"},
{"ID":"3","gpanel":"sdf","ptitle":"sdf","panel":"1",
"free":"yes","fees":"0.00"},
{"ID":"4","gpanel":"sfd","ptitle":"fes","panel":"1",
"free":"yes","fees":"0.00"},
{"ID":"5","gpanel":"bbbfff","ptitle":"hgffg","panel":"1,2",
"free":"yes","fees":"0.00"}
]
thanks in advance.

Solution 1
You can try this code
$.getJSON("active.json", function(result){
var UniqueNames= $.unique(result.map(function (d) {
return d.gpanel;
}));
var ul_block = $("<ul/>");
$.each(UniqueNames, function(i) {
$(ul_block).append('<li>' + UniqueNames[i] + '</li>');
});
$("#active").append(ul_block);
});
I have made some changes in your code,
1) code which is used for fetching uniquenames was removed inside from loop, so that it will not process everytime even though you required once
2) changed the loop from result to UniqueNames, since you are displaying those names only
You can made changes in my code to get required output i.e level of display
Solution 2:
As per the data structure and conditions you provided, Please check this code
$.getJSON("active.json", function(result) {
var panel_arr = ["", "Regular", "Reduced Fee", "Limited Assurance"];
var ul_block = $("<ul/>");
$.each(result, function(i, data) {
console.log(data);
var panels = data.panel.split(",");
var uli_block = $("<ul/>");
$.each(panels, function(j, jdata){
var ulii_block = $("<ul/>");
$(ulii_block).append($("<li/>").text(data.ptitle));
$(uli_block).append($("<li/>").text(panel_arr[panels[j]])).append(ulii_block);
});
$(ul_block).append($("<li/>").text(data.gpanel).append(uli_block));
});
$("#active").append(ul_block);
});

Related

Why my ajax function cannot append html at targeted div element?

I am submitting a html form through AJAX and then appending results at particular div element.The corresponding ajax is :-
$(document).ready(function(){
$('.commentbutton').click(function(){
var idb=$(this).attr('id');
var formid=$('#Comment'+idb);
datab=getFormData(formid);
$.ajax({
type:"POST",
url:'/submit/channelcomment',
data:datab,
success:function(data){
console.log(data.content);
console.log(data.profile);
var html="<div class='CommentRow'><a href='/Channel/"+data.profile+"/'style='font-weight: bolder;margin-right: 10px;display: inline-block;'>"+data.profile+"</a>"+data.content+"</div>"
console.log('Done');
idt=$('#CommentBody'+idb);
console.log(idt);
idt.append(html);
},
}),
event.preventDefault();
});
});
function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
The desired position at which i'm trying to append html is as follows:-
<div class="CommentBody" id="CommentBody{{c.id}}">
</div>
Here c.id and idb equals to 1.But it is not appending html.
When you say
But it is not appending html.
What is actual behavior?
I tried the dummy code as below and it is working fine.
$(document).ready(function() {
$('.commentbutton').click(function() {
var html = "<div class='CommentRow'><a href='/Channel/data.profile/'style='font-weight: bolder;margin-right: 10px;display: inline-block;'>data.profile</a>data.content</div>"
var idb = '1';
idt = $('#CommentBody' + idb);
alert(idt);
idt.append(html);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='commentbutton'>Comment</button>
<div class="CommentBody" id="CommentBody1">
</div>

loop posting ajax results until they are all posted

the below code works great for displaying in my first file
$.ajax({
url : "http://localhost/website/files/userstuff/files/",
asynch : false,
cache : false,
success: function (data) {
$(data).find("a").each(function(i, el) {
var val = $(el).attr('href');
if (val.match(/\.(pdf|doc|docx|txt|html|js|css|rar|7zip)$/)) {
var fileslocation = ("http://localhost/website/files/userstuff/files/" + val)
var displayfilestable = ("<table><thead><tr><th>Files</th></tr></table>");
var adddata = ("<tr><td><a href='"+ fileslocation +"'target='_blank'>"+ val +"</td></tr>");
$("#filestable").html(displayfilestable)
$("filestable, table").append(adddata);
console.log(adddata)
}
});
}
});
this code will as you would think pull and display the files in the table row, however it is only performing this for the first file it finds I was wondering if anyone here could help get this to display all of the files in the files folder in the table. thanks in advance
enter image description here
Your code just works fine. The problems is, in that loop (each) you keep re-create table. That why it show only 1 data. Check my example based on your code.
HTML
<div>
sad1.pdf<br>
sad2.pdf<br>
sad3.pdf
<div id="filestable"></div>
</div>
JAVASCRIPT
var displayfilestable = ("<table><thead><tr><th>Files</th></tr></table>");
$("#filestable").html(displayfilestable);
$("DIV").find("a").each(function(i, el) { // this is your data
var val = $(el).attr('href');
if (val.match(/\.(pdf|doc|docx|txt|html|js|css|rar|7zip)$/)) {
var fileslocation = ("http://localhost/website/files/userstuff/files/" + val)
var adddata = ("<tr><td><a href='"+ fileslocation +"'target='_blank'>"+ val +"</td></tr>");
$("filestable, table").append(adddata);
console.log(adddata)
}
});
AND Jsfiddle here :https://jsfiddle.net/synz/yrag1zpr/

accessing first element in js collection

in my js function I had following
success: function (result) {
$.each(result, function (i, item) {
$("#tab-" + item.myType).append(result);
})
}
Now I've change this function and instead I have following
success: function (result) {
$("#tab-how To Access to the first result collection element ").html(result);
}
}
I tried with
$("#tab-" + result[0].item.myType).html(result);
but it didn't help.
Question is: How to access to the first js element inside result collection object
Any thoughts ?
Using console.log(result) I'm getting html snippets which I display on partial view
div class="product clearfix">
<div class="l-new">
<a href="#">
#Model.MyType (rendered as My Type)
</a>
....
</div>
You can try:
result[0] // if you have numeric indices in your result collection
OR
var firstItem = null;
for(var x in result) { // if you have named properties
firstItem = result[x];
break;
}

get data of selected rows in slickgrid

I have a slickgrid in which some rows are hidden by a filter (DataView).
When I now call the getSelectedRows method of the grid I get the indices of the visibly selected rows. But I need the actual data of the selected rows.
You must do something like this:
var selectedData = [],
selectedIndexes;
selectedIndexes = _grid.getSelectedRows();
jQuery.each(selectedIndexes, function (index, value) {
selectedData.push(_grid.getData()[value]);
});
Right now the selectedData variable contains data for selected rows.
You have a mistake. It needs to be "getDataItem" and not "getData".
var selectedData = [],enter code here`selectedIndexes;
selectedIndexes = _grid.getSelectedRows();
jQuery.each(selectedIndexes, function (index, value) {
selectedData.push(_grid.getDataItem(value));
});
hObjMarcado = ( grid.getSelectedRows());
for( var a_id in hObjMarcado ) {
vres.push( dataview.getItem( hObjMarcado[a_id] ));
//la opcion getItem obtiene el elemento especifico,
//aun con filtro.
}
return vres;
You can also use this line in the .each loop to pull the data from the dataView instead of using getData() from the grid object, since that seems to be inconsistent depending on the fork:
var selectedData = [],
selectedIndexes;
selectedIndexes = _grid.getSelectedRows();
jQuery.each(selectedIndexes, function (index, value) {
selectedData.push(_dataView.getItemById(value));
});
If you access grid from other control like . click button
var selectRow = gridInstance.getSelectedRows();
alert(gridInstance.getDataItem(selectRow).columnName)

HTML table data into arrays via jQuery

I want to extract data from an html table like
<table>
<tr>
<th> Header1 </th>
<th> Header2 </th>
<th> Header3 </th>
</tr>
<tr>
<td> Value 1,1 </td>
<td> Value 2,1 </td>
<td> Value 3,1 </td>
</tr>
... rows ...
</table>
and get arrays:
an array for the headers
a 2d array for the column values (or an array for each column)
How can I do this using jQuery?
I don't care to serialize it, or put it into a JSON object because I want to use it to render a chart.
related General design question:
at the moment I have something like
1. ajax query returns html table
2. use jQuery to get values from html table
3. render chart
does it make more sense to throw a JSON object back from the ajax query and then render a table and a chart from there?
demo updated http://jsfiddle.net/ish1301/cnsnk/
var header = Array();
$("table tr th").each(function(i, v){
header[i] = $(this).text();
})
alert(header);
var data = Array();
$("table tr").each(function(i, v){
data[i] = Array();
$(this).children('td').each(function(ii, vv){
data[i][ii] = $(this).text();
});
})
alert(data);
Something like this?
$(function() {
var headers = $("span",$("#tblVersions")).map(function() {
return this.innerHTML;
}).get();
var rows = $("tbody tr",$("#tblVersions")).map(function() {
return [$("td:eq(0) input:checkbox:checked",this).map(function() {
return this.innerHTML;
}).get()];
}).get();
alert(rows);
});
yet another way of doing it
var headers = jQuery('th').map(function(i,e) { return e.innerHTML;}).get();
var datas = []
jQuery.each(jQuery('tr:gt(0)'), function(i,e ) {
datas.push(jQuery('td', e).map(function(i,e) {
return e.innerHTML;
}).get()
);
});
Something along the lines of:
var thArray = new Array();
var contentArray = new Array();
$('th').each(function(index) {
thArray[index] = $(this).html();
})
$('tr').each(function(indexParent) {
contentArray['row'+indexParent] = new Array();
$(this).children().each(function(indexChild) {
contentArray['row'+indexParent]['col'+indexChild] = $(this).html();
});
});
This gives you two arrays, thArray which is an array of your headings and contentArray which is a 2d array containing rows and columns: contentArray['row1']['col0'] returns " Value 1,1"
Actually, contentArray contains the th's as well... referenced 'row0'
does it make more sense to throw a JSON object back from the ajax query and then render a table and a chart from there?
Yes, absolutely. Return JSON in response to your AJAX request, then you can render the table using something like jQuery Templates and use the same underlying data to generate your chart as well.
Here's a modification of Jerome Wagner's answer that uses recursive maps instead of a map inside an 'each':
http://jsbin.com/oveva3/383/edit
var headers = $("th",$("#meme")).map(function() {
return this.innerHTML;
}).get();
var rows = $("tbody tr",$("#meme")).map(function() {
return [$("td",this).map(function() {
return this.innerHTML;
}).get()];
}).get();
I'm tinkering with the same thing over here, but I prefer iterating through all tables and writing the header and body arrays into properties of each table, so here's my modification to the original answer:
$(function() {
$("table").each(function(){
var $table = $(this),
$headerCells = $("thead th", $(this)),
$rows = $("tbody tr", $(this));
var headers = [],
rows = [];
$headerCells.each(function(k,v) {
headers[headers.length] = $(this).text();
$table.prop("headAry", headers);
});
$rows.each(function(row,v) {
$(this).find("td").each(function(cell,v) {
if (typeof rows[cell] === 'undefined') rows[cell] = [];
rows[cell][row] = $(this).text();
$table.prop("bodAry", rows);
});
});
console.log($(this).prop('headAry'));
console.log($(this).prop('bodAry'));
});
});
JSbin
Use this line of code:
var arrays = [];
$('table').eq(0).find('tr').each((r,row) => arrays.push($(row).find('td,th').map((c,cell) => $(cell).text()).toArray()))
I would think it would make more sense to get a json array back from the ajax call and generate your table/chart from that. With jquery templates this isn't hard at all.

Categories

Resources