Parsing json data in phonegap using jquery

Question

Following is my json data URL http://bluestonesolutions.in/Connect4mJson/GetEmployees.svc/getnotice?InstanceId=604&EnoticeType=Flash%20News&UserID=112730&IsGlobalNotice=0

I want display data in table using jquery Mobile for Phonegap. I can fetch data easily but can display in mobile.

Here is working example. Please guide me how to parse it for phonegap

$(document).ready(function() {
    $.ajax({
        url : 'http://bluestonesolutions.in/Connect4mJson/GetEmployees.svc/getnotice?InstanceId=604&EnoticeType=Flash%20News&UserID=112730&IsGlobalNotice=0',
        type : 'GET',
        dataType : 'JSON',
        crossDomain: true,
        success : function(data) {      
            document.write('<table width="400" height="288" align="center"  style="border:5px solid #10A3D8; ">')
            $.each(data, function() {
                console.log(this.Subject);
                document.write('<tr style="background:#D4D2D2;" >')
                document.write('<td style="color:#041DB3;">'+'Subject:-</td>')
                document.write('<td style="color:#041DB3;">'+this.Subject+'</td>')
                document.write('</tr>')
                document.write('<tr style="background:#04A273;">')
                document.write('<td>'+'Description:-</td>')
                document.write('<td>'+this.ENoticeDescription+'</td>')
                document.write('</tr>')
            });
            document.write('<table>');          
            // open console debugging tools on google and see the parse value
        },
        error : function() {}
    });
});

Answer 1

尝试使用它来解析JSON

jQuery.parseJSON()

Answer 2

You can parse JSON like var JsonStringify_ExecResData = JSON.stringify(data); var obj = jQuery.parseJSON(JsonStringify_ExecResData);

and like

localStorage.setItem("userEmail", userEmail);

You can set the parameters and get in another page like

localStorage.setItem("userEmail", userEmail);

Answer 3

I am no expert in Phonegap, but this is how you'd create/populate a table in jQuery for your specific scenario. You may then append the table to an exising element on the page or like I did, to the body (as it's a demo). Adapt this code to suit your needs, such as replace everything between success : function(data) { and }) with my code except the var dat = [....];

 var data = [{"CategoryName":"Flash News","DisplayOrder":"0","ENoticeDescription":"","ENoticeId":19619,"NoticeDocument":"","Subject":"Singing competitions will be conducted this Month, interested candidates can come to office room and enroll.","createddate":"12 Jun 2014","noticedate":"6\\/12\\/2014 12:00:00 AM"},{"CategoryName":"Flash News","DisplayOrder":"0","ENoticeDescription":"","ENoticeId":19623,"NoticeDocument":"","Subject":"Flowers day celebrations will be conducted on 1st Saturday of next Month, Students are instructed to bring 5 different Flowers.","createddate":"12 Jun 2014","noticedate":"6\\/12\\/2014 12:00:00 AM"},{"CategoryName":"Flash News","DisplayOrder":"0","ENoticeDescription":"","ENoticeId":19624,"NoticeDocument":"","Subject":"Painting competitions for Senior Program will be conducted on 30th of this month.","createddate":"12 Jun 2014","noticedate":"6\\/12\\/2014 12:00:00 AM"},{"CategoryName":"Flash News","DisplayOrder":"0","ENoticeDescription":"Debate competition for Senior class students will be conducted on 2nd of April month, interested students contact Head of Senior Program Staff.","ENoticeId":19660,"NoticeDocument":"","Subject":"Senior Program - Debate Competition","createddate":"12 Jun 2014","noticedate":"6\\/12\\/2014 12:00:00 AM"}]; var $table = $('<table width="400" height="288" align="center" style="border:5px solid #10A3D8;">'); var $trs = $(); $.each(data, function() { var $tr = $("<tr/>").css("background", "#D4D2D2"); var $td = $("<td/>").css("color", "#041DB3").text("Subject:"); $tr.append($td); $td = $("<td/>").css("color", "#041DB3").text(this.Subject); $tr.append($td); $trs = $trs.add($tr); $tr = $("<tr/>").css("background", "#04A273"); $td = $("<td/>").css("color", "#041DB3").text("Description:"); $tr.append($td); $td = $("<td/>").css("color", "#041DB3").text(this.ENoticeDescription); $tr.append($td); $trs = $trs.add($tr); }); $table.empty().append($trs); $("body").empty().append($table); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Use CSS classes instead of .css("prop", "value") as it's against performance when you have 100s of elements. It's okay for this specific case as the data is not that huge. But, I'd still suggest that you use classes.