Append dymanic data from sessionStorage (JSON) to Listview - javascript

I have the following bit of data(JSON) stored in a session:
Prescription: [{"medID":"id1","medName":"name1","medQty":"qty1","medDirec":"Directions1"}, {"medID":"id2","medName":"name2","medQty":"qty2","medDirec":"Directions2"}]
I want to get these information automatically "displayed" inside a Listview (jQuery Mobile) on page load, for this I have come up with the following:
$(document).ready(function () {
window.addEventListener('load', OnStorage, false);
});
function OnStorage(event) {
if (window.sessionStorage) {
var retrievedData = sessionStorage.getItem("Prescription");
var PrescriptionJSON = JSON.parse(retrievedData);
var prescLength = PrescriptionJSON.Length();
for (var i = 0; i < PrescriptionJSON.Length(); i++) {
var text = '<h2>' + PrescriptionJSON[i].medName + '</h2>' +
'<p><strong>Quantity: </strong>' + PrescriptionJSON[i].medQty + '</p>' +
'<p><strong>Directions: </strong>' + PrescriptionJSON[i].medDirec + '</p>'
$('<li />', {
html: text
}).appendTo("#summaryList ul");
//$("#summaryList").append(text);
//alert(retrievedData);
}
$('#summaryList').listview("refresh");
$('#summaryList').trigger("create");
}
}
When I uncomment //alert(retrievedData); I get the JSON inside an alert popup, but when I call //alert(PrescriptionJSON); (the parsed variable) I get something like [object, Object]. Nonetheless, I don't know if this is worth mentioning but just in case I am.
Basically I don't know what is wrong in the script above, because I don't get anything from the JSON data appended to the listview.
Just for reference I have this on my HTML side.
<ul id="summaryList" data-role="listview" data-inset="true">
<li data-role="list-divider" style="text-align:center">Prescription Summary</li>
</ul>
Please note that the length of the data (Prescription) will be dynamically created so the length may not always be 2 like the example above.
I have gone through a good 2 hrs researching online and have found similar questions but none could help me solve my problem. I've also had a look at http://www.copterlabs.com/blog/json-what-it-is-how-it-works-how-to-use-it/ and learned a few more things but still have not be able to work my way around my problem.
Any suggestions or questions are greatly welcomed!


var PrescriptionJSON = '[{"medID":"id1","medName":"name1","medQty":"qty1","medDirec":"Directions1"}, {"medID":"id2","medName":"name2","medQty":"qty2","medDirec":"Directions2"}]';
localStorage.setItem("PrescriptionJSON", PrescriptionJSON);
function OnStorage(event) {
if (window.localStorage) {
var retrievedData = localStorage.getItem("PrescriptionJSON");
var obj = $.parseJSON(retrievedData);
var li = "";
$.each(obj, function(key, value) {
li += '<li><h2>' + value.medName + '</h2><p><strong>Quantity: </strong>' + value.medQty + '</p><p><strong>Directions: </strong>' + value.medDirec + '</p></li>'
})
$('#summaryList').append(li).trigger("create");
$('#summaryList').listview("refresh");
}
}

Related

Vanilla JS category selector .removeAttribute problem

New on dev and JS following a (apparently) simple tutorial I got stacked in a silly problem, a function that has to select categories just adding or removing attributes.
It adds (and hides) but doesn't remove (and lets appear).
Function:
var showAndHideSongs = function(event, filter) {
// get all songs that match the genre of the filter
var songsByGenre = Array.from(
document.querySelectorAll('#playlist [data-genre="' + filter + '"]')
);
// if checkbox is checked, show songs
// otherwise, hide them
if (event.target.cheched) {
songsByGenre.forEach(function(song) {
song.removeAttribute("hidden");
});
} else {
songsByGenre.forEach(function(song) {
song.setAttribute("hidden", "true");
});
}
};
HTML:
<ol id="playlist">
<li data-genre="pop">
"Thank U, Next" by Arianna Grande
</li>
<li....
Checkboxes are dynamically created:
var renderCheckLists = function(genres) {
app.innerHTML =
"<h2>Filter Songs</h2><h3>By Genre</h3>" +
genres
.map(function(genre) {
var html =
"<label>" +
'<input type="checkbox" checked data-filter="' +
genre +
'" checked>' +
genre +
"</label>";
return html;
})
I tried literally everything but the solution
As I said it removes but looks like if "removeAttibute" doesn't work.
I tried the removeAttribute in a blank test project and actually works perfectly, so the problem is not there
Thanks in advance for the help

sorting through an array to place code in the proper divs through jQuery

Currently making a website to index and play movies stored on my hard drive that I've recently pulled off dvds just as a little side project. I have a 'master movie list' JSON file with all the data I need for each movie including the name, video source, video poster source, and genre which I would like to allow the use of placing a movie in multiple different genres.
Currently the problem I'm having is while I'm parsing through the genre list generated its not placing the html in the correct ID that id like it to on the webpage.
For example:
"genre":"comedy,recent,scifi"
I went about it how I thought I should, through getJSON and setting an output variable to which I get the genre value, split to make it an array, and get the element by going through each of them in a loop. Its not placing it in the right place though. The example above would be placed in comedy, recent, scifi, horror, and a few others for some reason and I have absolutely no reason why.
$.getJSON('/webresource/data/movies.json', function(data) {
console.log(data);
var output = '';
var ele = $('');
$.each(data, function(key, val) {
output += '<div class="video_box lazy-background" video-src="' +
val.video_src + '" video-poster-src="' +
val.video_poster_src + '">' +
'<h5>' + val.name + '</h5>' +
'</div> ';
var genres = val.genre;
var genresarray = genres.split(',');
for (i = 0; i < genresarray.length; i++) {
var genreelement = $('#' + genresarray[i]);
genreelement.html(output);
}
});
});
[ {
"name": "a star is born", "video_src":"/files/movies/A%20Star%20Is%20Born/astarisborn.mp4", "video_poster_src":"https://images-na.ssl-images-amazon.com/images/I/51R-TU6VaTL.jpg", "genre":"recently,romance,drama"
}
] // this is an example of the json
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="genre_box">
<h3>RECENTLY ADDED</h3>
<div class="scroll_box" id="recently"></div>
</div>
<div class="genre_box">
<h3>ACTION</h3>
<div class="scroll_box" id="action"></div>
</div>
<div class="genre_box">
<h3>COMEDY</h3>
<div class="scroll_box" id="comedy"></div>
</div>

Your output variable is being appended to and kept on every iteration of your $.each loop. What you want is to append to the end of $("#action"), $("#comedy"), etc. You should do something along these lines:
$.getJSON('/webresource/data/movies.json', function(data) {
console.log(data);
$.each(data, function(key, val) {
var output = '<div class="video_box lazy-background" video-src="' +
val.video_src + '" video-poster-src="' +
val.video_poster_src + '">' +
'<h5>' + val.name + '</h5>' +
'</div> ';
var genres = val.genre;
var genresarray = genres.split(',');
for (var i = 0; i < genresarray.length; i++) {
var genreelement = $('#' + genresarray[i]);
genreelement.append(output);
}
});
});

JQuery Mobile - Passing Variables Between Dynamically Generated Pages

I guess I should just be happy because of the general awesomeness of JQuery-Mobile, but I still can't imagine why JQueryMobile would not have a native way to pass variables.
Anyway, I'm trying to pass some variables around to create custom content on dynamically created "pages".
The pages are dynamically created fine. However I haven't been able to pass one single variable and have been trying for over a couple days now.
Any help would be awesome.
For the latest attempt at passing variables, I'm trying CameronAskew's $.mobile.paramsHandler.addPage code which works great out of the box.
Apart from generic jquery-mobile starting point, I Started With This Script which works really well to make pages dynamically, shown here:
// Prepare your page structure
var newPage = $("<div data-role='page' id='page'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here</div></div>");
// Append the new page into pageContainer
newPage.appendTo($.mobile.pageContainer);
// Move to this page by ID '#page'
$.mobile.changePage('#page');
Here's the full javascript:
run();
setInterval(function(){
run();
},5000);
function run() {
var output;
$.ajax({
url: "http://[url_here]/mobile_get_data_2.php",
success: function( data ) {
var obj = jQuery.parseJSON( data );
var output='';
var charts='';
var idx=1;
$.each(obj,function(k,v){
output += '<ul data-role="listview" data-count-theme="a" data-inset="true">';
output += '<a data-count-theme="a" href="#chart?param1=212121&param2=32327"><li>[returned description here]';
output += '<span class="ui-li-count">';
output += [returned count here];
output += '</span></a></li>';
output += '</ul>';
idx = (idx+1);
});
$('#sensors').html(output).trigger("create");
}
});
}
$('#sensors').on('click', function ( e) {
// Prepare your page structure
var newPage = $(
"<div data-role='page' id='page'>"
+ "<div data-role=header>"
+ "<a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>"
+ "<h1>Chart</h1>"
+ "</div>"
+ "<div data-role=content>Chart Here</div>"
+ "</div>"
);
newPage.appendTo($.mobile.pageContainer); // Append the new page into pageContainer
// Move to this page by ID '#page'
$.mobile.changePage('#page');
});
// CameronAskew
$(function () {
$.mobile.paramsHandler.addPage(
"page", // jquery mobile page id which will accept parameters
["param1", "param2"], // required parameters for that page
[], // optional parameters for that page,
function (urlVars) {
// $("#param1display").html(urlVars.param1);
// $("#param2display").html(urlVars.param2);
alert( urlVars.param1);
}
);
$.mobile.paramsHandler.init();
});
And the HTML:
<div data-role="page" id="summary">
<div data-role="header"><h1>MakerSpace</h1></div>
<ul id="sensors" data-role="listview" data-count-theme="c" data-inset="true"></ul></div>
<div data-role="footer"></div>
</div>

The stars aligned!
Changed this
$('#sensors').on('click', function ( e) {
to this
$('ul').on('click', function () {
put the variable in (obviously)
output += '<a data-count-theme="a" href="#chart?param1=[returned id]"><li>[returned description]';
And now it works.
I hope this helps someone out there...

Create HTML table in Javascript with JSON or jQuery

I'm not any good at JavaScript (yet!) - I really need some help to get past this stuck point that is causing me lots of premature hair loss!
I just can't seem to figure out how to build the following HTML code using JSON data.
This is a sample of the JSON data that I have being generated for the new version of this page I'm working on:
[{"id":"1732","name":"1BR House","checkin":"2012-12-20","checkout":"2012-12-23","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1587","name":1BR House","checkin":"2012-12-23","checkout":"2013-01-01","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1661","name":"2BR Studio","checkin":"2012-12-25","checkout":"2013-01-02","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1829","name":"Studio Cottage","checkin":"2012-12-25","checkout":"2012-12-29","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1787","name":"Studio Cottage","checkin":"2012-12-29","checkout":"2013-01-08","inclean_cleaner":"","inclean_datetime":"2012-12-29 00:00:00","inclean_notes":""},{"id":"1843","name":"1BR House","checkin":"2013-01-07","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1970","name":"Studio Cottage","checkin":"2013-01-12","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1942","name":"Suite","checkin":"2013-01-15","checkout":"2013-01-20","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""}]
To illustrate the HTML result I need, here is how I currently do it without JSON (strictly in PHP):
<div class="'.$dashboard_list_line_class.'">
<div class="dashboard_list_unitname"> '.$unit_name.'</div>
<div class="dashboard_list_cleaner_datetime"> '.$inclean_datetime.'</div>
<div class="dashboard_list_cleaner_checkin"> '.$checkin.'</div>
<div class="dashboard_list_cleaner_checkout"> '.$checkout.'</div>
<div class="dashboard_list_cleaner_inclean_cleaner"> '.$inclean_cleaner.'</div>
<div class="dashboard_list_cleaner_notes"> '.$inclean_notes.'</div>
</div>
What would the code look like in jQuery or JavaScript to grab the JSON, iterate though the arrays and create the same result as the PHP I have shown? I've been trying for hours, and get different results of puling data - but I just can't make it work.
Thanks for your help!

Here is you complete solution:
$.ajax( "example.php" ).done(function (response) {
//var data = [{"id":"1732","name":"1BR House","checkin":"2012-12-20","checkout":"2012-12-23","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1587","name":"1BR House","checkin":"2012-12-23","checkout":"2013-01-01","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1661","name":"2BR Studio","checkin":"2012-12-25","checkout":"2013-01-02","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1829","name":"Studio Cottage","checkin":"2012-12-25","checkout":"2012-12-29","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1787","name":"Studio Cottage","checkin":"2012-12-29","checkout":"2013-01-08","inclean_cleaner":"","inclean_datetime":"2012-12-29 00:00:00","inclean_notes":""},{"id":"1843","name":"1BR House","checkin":"2013-01-07","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1970","name":"Studio Cottage","checkin":"2013-01-12","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1942","name":"Suite","checkin":"2013-01-15","checkout":"2013-01-20","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""}];
var data = $.parseJSON(response);
var dashboard_list_unitname = 'change_this';
var booking_id = 'also_change_this';
$(data).each(function (i, row) {
$(row).each(function (j, col) {
var html = '<div class="row_' + i + '">' +
'<div class="' + dashboard_list_unitname + '"> ' + col.name + '</div>' +
'<div class="dashboard_list_cleaner_datetime"> ' + col.inclean_datetime + '</div>' +
'<div class="dashboard_list_cleaner_checkin"> ' + col.checkin + '</div>' +
'<div class="dashboard_list_cleaner_checkout"> ' + col.checkout + '</div>' +
'<div class="dashboard_list_cleaner_inclean_cleaner"> ' + col.inclean_cleaner + '</div>' +
'<div class="dashboard_list_cleaner_notes"> ' + col.inclean_notes + '</div>' +
'</div>';
$('body').append($(html));
});
});
});

jQuery templates can help here.
http://api.jquery.com/jquery.tmpl/ shows several examples of a template being populated from a JSON-like data bundle, and the {{each}} element allows you to iterate over lists to populate rows and cells.
Template:
<li>
Title: ${Name}.
{{each Languages}}
${$index + 1}: <em>${$value}. </em>
{{/each}}
</li>
Data:
var movies = [
{ Name: "Meet Joe Black", Languages: ["French"] },
{ Name: "The Mighty", Languages: [] },
{ Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] }
];

Everyone seems to be assuming knowledge of AJAX calls. It's not complicated, here is an example,
$.get('json/url', function(json_data) {
// do stuff with your data
// like, other people suggested json_data.each(function(item) {
// do stuff
// });
});
You can learn more about it straight from the jQuery docs,
http://api.jquery.com/jQuery.get/
If you need to make a post request just consult the jQuery docs for post, or for the more general article, the jQuery docs for AJAX calls: http://api.jquery.com/jQuery.ajax/.

var table = '';
$.each(json_data, function(index, obj) {
table += '<div>';
for(var x in obj) {
table += '<div class="dashboard_list_unitname"> '+ obj[x]+'</div>';
}
table += '</div>';
});

How to get the value of id of innerHTML?

I have created a html like this:
<body onload = callAlert();loaded()>
<ul id="thelist">
<div id = "lst"></div>
</ul>
</div>
</body>
The callAlert() is here:
function callAlert()
{
listRows = prompt("how many list row you want??");
var listText = "List Number";
for(var i = 0;i < listRows; i++)
{
if(i%2==0)
{
listText = listText +i+'<p style="background-color:#EEEEEE" id = "listNum' + i + '" onclick = itemclicked(id)>';
}
else
{
listText = listText + i+ '<p id = "listNum' + i + '" onclick = itemclicked(id)>';
}
listText = listText + i;
//document.getElementById("lst").innerHTML = listText+i+'5';
}
document.getElementById("lst").innerHTML = listText+i;
}
Inside callAlert(), I have created id runtime inside the <p> tag and at last of for loop, I have set the paragraph like this. document.getElementById("lst").innerHTML = listText+i;
Now I am confuse when listItem is clicked then how to access the value of the selected item.
I am using this:
function itemclicked(id)
{
alert("clicked at :"+id);
var pElement = document.getElementById(id).value;
alert("value of this is: "+pElement);
}
But getting value as undefined.
Any help would be grateful.

try onclick = itemclicked(this.id) instead of onclick = 'itemclicked(id)'

Dude, you should really work on you CodingStyle. Also, write simple, clean code.
First, the html-code should simply look like this:
<body onload="callAlert();loaded();">
<ul id="thelist"></ul>
</body>
No div or anything like this. ul and ol shall be used in combination with li only.
Also, you should always close the html-tags in the right order. Otherwise, like in your examle, you have different nubers of opening and closing-tags. (the closing div in the 5th line of your html-example doesn't refer to a opening div-tag)...
And here comes the fixed code:
<script type="text/javascript">
function callAlert() {
var rows = prompt('Please type in the number of required rows');
var listCode = '';
for (var i = 0; i < rows; i++) {
var listID = 'list_' + i.toString();
if (i % 2 === 0) {
listCode += '<li style="background-color:#EEEEEE" id="' + listID + '" onclick="itemClicked(this.id);">listItem# ' + i + '</li>';
}
else {
listCode += '<li id="' + listID + '" onclick="itemClicked(this.id);">listItem# ' + i + '</li>';
}
}
document.getElementById('thelist').innerHTML = listCode;
}
function itemClicked(id) {
var pElement = document.getElementById(id).innerHTML;
alert("Clicked: " + id + '\nValue: ' + pElement);
}
</script>
You can watch a working sample in this fiddle.
The problems were:
You have to commit the id of the clicked item using this.id like #Varada already mentioned.
Before that, you have to build a working id, parsing numbers to strings using .toString()
You really did write kind of messy code. What was supposed to result wasn't a list, it was various div-containers wrapped inside a ul-tag. Oh my.
BTW: Never ever check if sth. is 0 using the ==-operator. Better always use the ===-operator. Read about the problem here
BTW++: I don't know what value you wanted to read in your itemClicked()-function. I didn't test if it would read the innerHTML but generally, you can only read information from where information was written to before. In this sample, value should be empty i guess..
Hope i didn't forget about anything. The Code works right now as you can see. If you've got any further questions, just ask.
Cheers!

You can pass only the var i and search the id after like this:
Your p constructor dymanic with passing only i
<p id = "listNum' + i + '" onclick = itemclicked(' + i + ')>
function
function itemclicked(id)
{
id='listNum'+i;
alert("clicked at :"+id);
var pElement = document.getElementById(id).value;
alert("value of this is: "+pElement);
}
is what you want?

I am not sure but shouldn't the onclick function be wrapped with double quotes like so:
You have this
onclick = itemclicked(id)>'
And it should be this
onclick = "itemclicked(id)">'
You have to modify your itemclicked function to retrieve the "value" of your p element.
function itemclicked( id ) {
alert( "clicked at :" + id );
var el = document.getElementById( id );
// depending on the browser one of these will work
var pElement = el.contentText || el.innerText;
alert( "value of this is: " + pElement );
}
demo here

Categories

Resources