使用jquery解析phonegap中的json数据答案

【问题标题】：Parsing json data in phonegap using jquery使用jquery解析phonegap中的json数据
【发布时间】：2015-04-02 12:22:50
【问题描述】：

以下是我的 json 数据 URL http://bluestonesolutions.in/Connect4mJson/GetEmployees.svc/getnotice?InstanceId=604&EnoticeType=Flash%20News&UserID=112730&IsGlobalNotice=0

我想使用 jquery Mobile for Phonegap 在表格中显示数据。我可以轻松获取数据，但可以在移动设备中显示。

这是工作示例。请指导我如何为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() {}
    });
});

【问题讨论】：

请格式化您的代码。
我可以辨认出document.write('') document.write('') document.write，这到底是什么O_o 这会擦除整个文档。

标签： javascript jquery cordova jquery-mobile phonegap-desktop-app

【解决方案1】：

尝试使用它来解析 JSON

jQuery.parseJSON()

【讨论】：

不。不需要，OP 正在使用dataType : 'JSON'（我知道很难阅读）。此外，jQuery.parseJSON() 自己不会做任何事情。这不是一个正确的答案。

【解决方案2】：

你可以像解析 JSON var JsonStringify_ExecResData = JSON.stringify(data); var obj = jQuery.parseJSON(JsonStringify_ExecResData);

喜欢

localStorage.setItem("userEmail", userEmail);

您可以设置参数并进入另一个页面，如

localStorage.setItem("userEmail", userEmail);

【讨论】：

【解决方案3】：

我不是 Phonegap 方面的专家，但这是您在 jQuery 中为您的特定场景创建/填充表的方式。然后，您可以将表格附加到页面上的现有元素，或者像我一样，附加到正文（因为它是一个演示）。调整此代码以满足您的需求，例如将success : function(data) { 和}) 之间的所有内容替换为我的代码，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);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

使用 CSS 类而不是 .css("prop", "value")，因为当您拥有 100 个元素时，它会降低性能。对于这种特定情况没关系，因为数据不是那么大。但是，我仍然建议您使用类。

【讨论】：