在网页中显示json数据

时间:2014-01-17 06:19:26

标签: jquery json

以下是用于在网页中显示json数据的代码。它正常工作

 $.ajax({
      url: '/Report',
      cache: false
    }).done(function (html) {
      $("#Result").html(JSON.stringify(html));
      $('#edit').removeAttr("disabled");
    }).fail(function () {
      $("#Result").html("Failed to run the test");
      $('#edit').removeAttr("disabled");
    });

我的问题是显示为

[{
  "id": 94,
  "jobid": "49",
  "status": {
    "test": "pagination",
    "os": "VM-WIN7-32-1",
    "browser": "browser=FF",
    "report": "Failed  Test Failed
    "
  },
  {
    "id": 9,
    "jobid": "44",
    "status": {
      "test": "Mypagination",
      "os": "VM-WIN7-64",
      "browser": "browser=GC",
      "report": "Failed  passed
    "
  }]

我只想把josn显示为吼叫。怎么可能?

    test: pagination
    os: VM-WIN7-32-1
    browser: browser = FF
    report: Failed Test Failed

test: Mypagination
    os: VM-WIN7-64
    browser: browser = GC
    report: Failed Passed

2 个答案:

答案 0 :(得分:2)

您正在获取JSON对象数据,并且您正在div上插入 这样做:

$.ajax({
  url: '/Report',
  cache: false
}).done(function (html) {
  var htm = "";

  $.each(html, function(i, data){
    htm += data.status.test + "<br />";
    htm += data.status.os + "<br />";
    htm += data.status.browser + "<br />";
    htm += data.status.report + "<br /><br />";
  });


  $("#Result").html( "<p>" + htm + "</p>" );
  $('#edit').removeAttr("disabled");
}).fail(function () {
  $("#Result").html("Failed to run the test");
  $('#edit').removeAttr("disabled");
});

问题:

问题在于您的JSON数据格式不正确,您的数据应为:

var html = [{
  "id": 94,
  "jobid": "49",
  "status": {
    "test": "pagination",
    "os": "VM-WIN7-32-1",
    "browser": "browser=FF",
    "report": "Failed  Test Failed" 
  }
},
{
  "id": 9,
  "jobid": "44",
  "status": {
    "test": "Mypagination",
    "os": "VM-WIN7-64",
    "browser": "browser=GC",
    "report": "Failed  passed" 
  }
}];

这是工作小提琴:http://jsfiddle.net/jogesh_pi/ak42M/

答案 1 :(得分:1)

  .done(function (html) {
      var data = $.parseJSON(html);
      var makeHTML = function(obj) {
          var str = '';
          for(var i in obj) {
              for(var j in obj[i]['status']) {
                  str += '<div>' + j + ':' + obj[i]['status'][j] + '</div>;
              }
          }
          return str;
      };
      var htmlStr = makeHTML(data);
      $("#Result").html(htmlStr);
      $('#edit').removeAttr("disabled");
  })