Question

I want to know, how to dynamically change the value of a json property on a jquery event and then loads it up on the browser. Here’s the sample json.

var spiderman = {
   "fname" : "Peter",
   "lname" : "Parker",
   "nick" : "Spidey"
}

and here’s the event, let’s say… a click event

HTML code

Input a new nickname:<br />
<input type="text" id="newNick" />
<div id="pressMe">Press Me!</div>
<div id="output"></div>

jQuery event

$("#pressMe").click(function(){
   var newNick = $("#newNick").val();

   /* please place the correct code here */

   $("#output").text("Spiderman's new nick is " + spiderman.nick);
})

The goal is:
The user inputs the new nickname. When the user clicks #pressMe, it will get the value of #newNick and place it inside json to change the “nick” property. After that… it will show the new “nick” property on #output.

I hope its not confusing. Thank you!

Answer 1

This should work fine:

spiderman.nick = newNick;

Remember that if the JSON comes from an AJAX request and you loaded it with jQuery (or eval), then object properties are accessible as I wrote (even if you see them quoted if you look at the raw response). If you defined the JSON in memory, then you don’t need to use quotes on property names, but instead you should write:

var spiderman = {
   fname : "Peter",
   lname : "Parker",
   nick : "Spidey"
}