Showing local storage values on HTML page - javascript

I have a survey that stores values to local storage. Trying to make a very simple 'admin' page that its sole purpose is to only display the local storage in an semi organized fashion via table etc. I'm not exactly sure how to go about it.
Here is what i have to store it.
$( document ).ready(function() {
$('#Save').click(function (e) {
if (confirm('Are you sure you want to submit? You will not be able to go back.')) {
var person = $("#FirstName").val() + "." + $('#LastName').val();
$('input, select, textarea').each(function () {
var value = $(this).val(),
name = $(this).attr('name');
localStorage[person + "." + name] = value;
window.location.href = "Confirmation.html";
console.log('stored key: ' + name + ' stored value: ' + value);
});
}
});
});
the key stored is firstname.lastname.element,value. if it could simply display basically like the console view ordered by key that would be great. Any point in a direction would be appreciated.

Unless you really can't manipulate your server side code, I highly recommend that you use $.ajax to post your form to the server and then serve back a response. I doubt that local storage was intended for form submission in quite this way. Otherwise, see below.
In order for you to show your localStorage items on the next page, you need to reference your localStorage items on the next page. After you change window.location.href, the previous page's context is no longer valid, thus name and value no longer exist. You should use something similar to this for both pages:
Submit.html
$(document).ready(function() {
$('#Save').click(function (e) {
if (confirm('Are you sure you want to submit? You will not be able to go back.')) {
var person = $("#FirstName").val() + "." + $('#LastName').val();
$('input, select, textarea').each(function () {
var value = $(this).val(),
name = $(this).attr('name');
localStorage["name"] = name;
localStorage["person"] = person;
localStorage[person + "." + name] = value;
window.location.href = "Confirmation.html";
console.log('stored key: ' + name + ' stored value: ' + value);
});
}
});
});
Confirmation.html
$(document).ready(function() {
var name = localStorage["name"];
var person = localStorage["person"];
var value = localStorage[person + "." + name];
console.log('stored key: ' + name + ' stored value: ' + value);
});

Related

Using Firebase, how can I pass a created key to another function?

I'm creating a multiuser app and wanted to use keys to product user information. I created a function that updates the child of a database with a generated key. The following function behaves correctly:
unlist(list) {
var postData = {
state: "unlisted",
};
var newPostKey = firebase.database().ref().child('foods').push().key;
var updates = {};
updates['foods' + '/' + list.$key + '/' + 'state' + '/' + newPostKey] = postData;
return firebase.database().ref().update(updates);}
I have a separate function that works similarly to this:
changestate(item) {
var postData = {
state: "listed",
};
var newPostKey = firebase.database().ref().child('foods').push().key;
var updates = {};
updates['foods' + '/' + item.$key + '/' + 'state' + '/' + newPostKey] = postData;
return firebase.database().ref().update(updates);}
In order to make this work correctly, the key that is created from unlist(list) needs to correspond to var newPostKey in changestate(item) and vice versa. How can I make this work?
cfoster5. What I have understood from your question is that the newPostkey from the unlist function should be passed to the changeState(item) function if that's what you want means you can do that by calling promise in the
firebase.database().ref().update(updates).then(function(){
// You can call changestate function and pass the function like below
_changestate(item,newPostkey);
});
and in your changestate function,
changestate=function(item,passedkey){
var newPostKey = passedkey;
}
See my jsfiddle sample

jQuery get an Array from json file

I need to get an array from a json file and I have no idea how to do it.
Here's the code I want to get the array from:
$.getJSON('saveGames/userID' + userID + '_SAVEALPHA.json', function(data) {
console.log("Save data from: userID" + userID + "_SAVEALPHA.json: " + data);
var testVar = jQuery.parseJSON(data);
var pokemonAryTest = testVar[0].pokemon;
pokemonAry = [pokemonAryTest];
console.log("loaded players Pokemon: " + pokemonAry);
console.log(pokemonAry[0])
});
I have tried to change the index of pokemonAry to 1 and it returns undefined. And when I keep the index the same, it returns ["Pikachu, Charmander"] so I think its acting like as if it's a string.
Here's the .json:
"[{\"userID\":\"1\",\"saveName\":\"g\",\"pokemon\":[\"Pikachu, Charmander\"]}]"
When you are using getJSON() method no need to parse JSON data, jQuery take care of it. :)
$.getJSON('saveGames/userID' + userID + '_SAVEALPHA.json', function(data) {
console.log("Save data from: userID" + userID + "_SAVEALPHA.json: " + data);
var pokemonAry = data[0].pokemon;
console.log("loaded players Pokemon: " + pokemonAry);
console.log(pokemonAry[0])
});

Combine data from different URLs in ajax

I have one ajax request which i use to extract data from API, and create a table from the extracted data. Now i need to do the same, but to extract the data from two different URLs and merge is to the same table (retTable).
Here is my current code (one ajax request):
$.ajax(
{
url : '/url/status',
type: "GET",
success:function(data, textStatus, jqXHR)
{
theRows = extract_status_data(data)
},
error: function(jqXHR, textStatus, errorThrown)
{
alert('error')
}
});
}
function extract_status_data(jsonDataRaw){
jsonResultSect = jsonDataRaw['result']
retTable = ""
for( key in jsonResultSect){
statusParam = jsonResultSect[key]
a = statusParam['a']
b = statusParam['b']
c = statusParam['c']
d = statusParam['d']
e = statusParam['e']
retTable += "<tr><td>" + dropDownList(key) + "</td><td>" + key + "</td><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + d + "</td><td>" + e + "</td></tr>"
}
return retTable
}
How would be correct to combine the data from two different URLs? Please advise.
I can't hammer out a really robust solution right now, but here is what I came up with: https://jsfiddle.net/heejse8h/
Basically the principal is that you place all the URLs in an array and keep a flag variable incrementing for every url you pull from. This might look like this:
urls = [
'/url/status',
'/url/status2'
];
var i = 0;
Then when you execute the AJAX, you'll want to store that in some array
var result = [];
For my AJAX call in the jsfiddle, I used this basic structure
$.ajax({
url : urls[i],
type: "GET",
success: function(data) {
// simplified example of storing the results
// the example code from the fiddle is more
// involved.
result[key].push(data);
if(urls[++i] !== undefined){
// if there is another URL, use the same
// ajax object (using `this`), extend it,
// changing only the URL, and call it.
// the important part is that the `this`
// object has a reference to the currently
// executing `success` method.
$.ajax($.extend(this, {url: urls[i]}));
} else {
// otherwise, we're at the end of our URLs
// and we can focus on final formatting and
// display of the data.
for( key in result ){
$('#mytable').append("<tr><td>" + dropDownList(key) + "</td><td>" + key + "</td>" + result[key].join('') + "</tr>");
}
}
}
});
In the end I would have liked to flesh this out and use the DOM API to actually create nodes rather than constant concatenation, but this solution already diverges from the original code quite a bit. You might want to consider creating a function that parses an object rather than relies on concatenation.

pass two parameters DDL in JavaScript / jQuery

This function works fine but passes only one parameter from one DropDownList to the controller. How to make the transfer of two parameters of an (two DDL)?
$(function () {
$('#DDL_1_ID').change(function () {
var URL = $('#FormID').data('someAction');
$.getJSON(URL + '/' + $('#DDL_1_ID').val(), function (data) {
$.each(data, function (i, format) { });
});
});
});
You could continue appending query string parameters as you've done with ddl_1_tc...
$.getJSON(URL + '/' + $('#DDL_1_ID').val() + '&myotherparam=' + yourotherinput
Your url appears to be malformed though. I believe you're missing the name of the first value...
$.getJSON(URL + '?nameforfirstparam=' + $('#DDL_1_ID').val() + '&nameforsecondparam=' + yoursecondinput

Trying to add variables to twitter json url

I'm trying to create a function which uses a combination of jquery, json and javascript to retrieve a twitter feed using the $.getJSON() method.
I have the function working with a static url like so:
$.getJSON("http://twitter.com/status/user_timeline/owzzz.json?count=1&callback=?", function(data) {
What I'm trying to do is replace where you see the username owzzz and count with values passed into the function.
the function looks something like this:
var twitterFeed = function(username, count){
$.getJSON("http://twitter.com/status/user_timeline/owzzz.json?count=1&callback=?", function(data) {
$.each(data, function(i) {
var timestamp = new Date(this.created_at);
var text = this.text;
$("#twitter").html(text +'<a href="http://twitter.com/' + username + '/" class="timestamp">' + username + ' <span>' + timestamp.toDateString() + '<\/span><\/div>' ).click(function(e) {
window.location = 'http://twitter.com/' + username;
e.preventDefault();
});
});
}); } twitterFeed('owzzz',1);
I can add the passed value username in the .html() but not inside the getJSON();
Any idea how I would go about this?
Do the same as you do in the html function: String concatenation.
$.getJSON("http://twitter.com/status/user_timeline/" + username + ".json?count=" + count + "&callback=?", ...)
string concatenation.
$.getJSON(
'http://twitter.com/status/user_timeline/' + username + '.json' +
'?count=' + count + '&callback=?'
);

Categories