【问题标题】:Build and prettify JSON object构建和美化 JSON 对象
【发布时间】:2016-08-10 02:59:10
【问题描述】:

我正在尝试使用 ajax 请求构建一个 JSON 对象,然后打印出所有经过美化的数据,以便于阅读。

这是我所拥有的:

var url, data;
var shows = ["stranger things", "the night of"];
var json = {};

$.each(shows, function(i, show) {
  url = 'https://www.omdbapi.com/?t=' + show + '&type=series&plot=short'
  $.ajax(url, {
    complete: function(obj, status){
      data = $.parseJSON(obj.responseText);
      json.push(obj.responseText);
      console.log(data);
    }
  });  
});

var jsonPretty = JSON.stringify({shows: json}, null, '\t');
$("pre").text(jsonPretty);

https://jsfiddle.net/we1p7cqj/1/

问题出在json.push(obj.responseText) 附近,但我无法找到解决办法。

有什么想法吗?

【问题讨论】:

    标签: jquery json object


    【解决方案1】:

    首先你的对象初始化错误: 应该是var json = [];

    另外,由于ajax请求默认是异步的,所以同时执行以下代码,此时json的值为空对象

    var jsonPretty = JSON.stringify({shows: json}, null, '\t');
    $("pre").text(jsonPretty);
    

    因此,您可以使 ajax 请求同步或在执行该代码之前检查最后一次显示:

    if(showsLength == i + 1){
        var jsonPretty = JSON.stringify({shows: json}, null, '\t');
        $("pre").text(jsonPretty);
    }
    

    演示https://jsfiddle.net/we1p7cqj/4/

    这里是另一种方法(同步请求)

    $.ajax(url, {
        async: false,
        complete: function(obj, status){
          data = $.parseJSON(obj.responseText);
          json.push(obj.responseText);
          console.log(data);
        }
      });
    

    演示https://jsfiddle.net/we1p7cqj/5/

    啊,我现在明白了。谢谢你的帮助,山姆!有没有办法 删除斜线 \"? – Jon 10 分钟前

    您看到这些斜线的原因是因为您正在对字符串而不是对象进行字符串化,因此要解决此问题,您需要在推送时将其设为 json 对象

    data = $.parseJSON(obj.responseText);
    json.push(data);
    

    演示: https://jsfiddle.net/we1p7cqj/7/

    【讨论】:

    • 啊,我明白了。谢谢你的帮助,山姆!有没有办法去掉斜线\"?
    • 我刚刚用一个演示更新了答案,向您展示了这些斜线的原因
    • 啊,有道理!感谢您的帮助!
    • 没问题,很高兴我能提供帮助。
    【解决方案2】:
    • 你不能推入物体;你可以推入数组。

      var json = [];
      
    • 您的.text(jsonPretty) 来得太早了。将其移动到 complete 处理程序中。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-03-23
      • 2019-08-20
      • 1970-01-01
      • 2013-03-22
      • 2018-03-02
      • 2020-10-13
      相关资源
      最近更新 更多