Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Sending JSON data from one HTML page to another using Session

    @pankaj.chauhan
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 5.71k
    Comment on it

    Here is the code of the send.html file:

    1. <ul id="ul-list">
    2.    <li><input type="text" class="input-text"><input type="text" class="input-text"></li>
    3.    <li><input type="text" class="input-text"><input type="text" class="input-text"></li>
    4.    <li><input type="text" class="input-text"><input type="text" class="input-text"></li>
    5.    <li><input type="text" class="input-text"><input type="text" class="input-text"></li>
    6. </ul>
    7. <button type="button">Send</button>

    This is the JQuery code when user clicks the button.  

    1. $("button").click(function(){                
    2.         var data = html2json();
    3.         storeUserDataInSession(data);
    4.         window.location = 'slider.html';  
    5.     });

    data variable contains the string value that is return by the html2json() function.

     Here is the functionality of the html2json() function for getting the text from the input boxes and creating a JSON string.

    1. function html2json() {
    2.     var key=['Terms','Definitions'] ;
    3.     var c =0;
    4.    var json = '{"UserData":[';
    5.    var otArr = [];
    6.    var tbl2 = $('#ul-list li').each(function(i) {        
    7.       x = $(this).find('.input-text');
    8.       var itArr = [];
    9.       x.each(function() {
    10.          itArr.push( '"'+key[c]+'":'+'"' + $(this).text().trim() + '"');
    11.          c++;
    12.       });
    13.       y.each(function() {
    14.          itArr.push( '"'+key[c]+'":'+'"' + $(this).attr('src') + '"');
    15.       });
    16.  
    17.       otArr.push('{' + itArr.join(',') + '}');
    18.       c =0;
    19.    })
    20.    json += otArr.join(",") + ']}';
    21.    return json;
    22. }

     After getting the value JSON string, storeUserDataInSession()  is called in which i have passed the JSON string as a parameter.

    1. function storeUserDataInSession(userData) {
    2.     var userObjectString = JSON.stringify(userData);
    3.     window.sessionStorage.setItem('userObject',userData);
    4. }    

    The JSON.stringyfy() function create a JSON string out of an object/array.

    After that i have stored the JSON data into the session and given the name "userObject".

    In order to retrieve this data in receive.html page, the following JS code is as follows:

    1. $(document ).ready(function() {
    2.         var data = {
    3.             getUserDataFromSession: function() {
    4.                 var userData = window.sessionStorage.getItem('userObject');
    5.                 console.log(userData);
    6.                 return JSON.parse(userData);
    7.             }
    8.         }
    9.         var userDataObject=data.getUserDataFromSession();
    10.    
    11.         for(i = 0; i < userDataObject.UserData.length; i++) {
    12.             $('div').append('<p><span>'+userDataObject.UserData[i].Terms+' : </span><span>'+userDataObject.UserData[i].Definitions+'</span></p>')
    13.         }          
    14.     });

    In the data variable i am getting the data from the session by providing the session name i.e., "userObject". now this data is in a JSON string format. In order to  convert this data into JSON object i have passed this data into JSON.parse() function.

    This value is passed to userDataObject variable.

    Now to access the value, iteration is done till the length of the JSON object and values are accessed by the key-value pair.

    Session html json
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: