Question

如何使用JSON对象而不是基本的java脚本对象来转换此代码以使用jQuery.getJSON()。换句话说，我希望能够保持代码的方式，但有足够的更改，它使用jQuery.getJSON()来获取另一个页面中的JSON对象。这是我的意思的细节。

＆＃13;

var data = {
  shop: [{
      item: "Ps3",
      cost: "$150"
    },
    {
      item: "xbox 360",
      cost: "$140"
    },
         {
      event: "Black Friday",
      date: "4-25-2018"
    },
         {
      special_guest: "John Doe",
      time: "4:30 pm"
    }
  ]
};
$(document).ready(function() {
  var z = $('.z'); // Grab class z to toggle
  var x = $('#x');
  var output = '';
  $.each(data.shop, function(index, element) {
    for(var j in element){
      output += element[j] + '<br>' ;
    }
  });
  x.html(output);
  $("button").click(function() {
    z.toggle(); // Toggle z on button click
  });
});

＆＃13;

h1 {
  color: gold;
}

#x {
  color: white;
  text-align: center;
}
.z {
  background-color: red;
  width: 250px;
  margin: auto;
  padding-bottom: 5px;
  display: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="z">
<h1>Details </h1>
<h2 id="x"></h2>
</div>
<button>Click</button>
</body>
</html>

＆＃13;

所以我需要找到将这个JavaScript对象代码转换为JSON对象并将其放在它自己的另一个页面上。并使用jQuery.getJSON()来获取此JSON对象

var data = {
    shop: [{
            "item": "Ps3",
            "cost": "$150"
        },
        {
            "item": "xbox 360",
            "cost": "$140"
        },
        {
            "event": "Black Friday",
            "date": "4-25-2018"
        },
        {
            "special_guest": "John Doe",
            "time": "4:30 pm"
        }
    ]
};

我仍然希望能够直观地生成相同的输出，它使用JSON对象，并使用jQuery.getJSON来获取该JSON对象。我知道这对你们大多数人来说可能是一个挑战，但我感兴趣

在代码示例建议中，您们愿意向我提供有关如何执行此操作的建议。最后一件事我知道我的JSON代码示例根据https://jsonlint.com/

是不正确的

所以我意识到了这一点。

Answer 1

调用返回JSON的API，然后将$.each循环放入回调函数中。

$(document).ready(function() {
  var z = $('.z'); // Grab class z to toggle
  var x = $('#x');
  var output = '';
  $.getJSON("url.json", function(data) {
    $.each(data.shop, function(index, element) {
      for (var j in element) {
        output += element[j] + '<br>';
      }
    });
    x.html(output);
  });
  $("button").click(function() {
    z.toggle(); // Toggle z on button click
  });
});

JSON文件应如下所示：

{
    "shop": [{
            "item": "Ps3",
            "cost": "$150"
        },
        {
            "item": "xbox 360",
            "cost": "$140"
        },
        {
            "event": "Black Friday",
            "date": "4-25-2018"
        },
        {
            "special_guest": "John Doe",
            "time": "4:30 pm"
        }
    ]
}

它不应该在开头有变量定义，也不应该在结尾有;，这是一个Javascript语句，不是JSON数据的一部分。并且所有属性名称都需要在JSON中引用。

如何转换此jQuery脚本以使用带有JSON对象的jQuery.getJSON？

1 个答案: