如何将这个jQuery脚本转换为与带有JSON对象的jQuery.getJSON一起使用？

Question

我如何使用JSON对象而不是基本的Java脚本对象来隐蔽此代码以使用jQuery.getJSON() 。 换句话说，我希望能够保持代码的jQuery.getJSON() ，但要进行足够的更改，以使其使用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" } ] }; $(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 }); });

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

 <!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>

因此，我需要设法将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对象。 我知道这对大多数人来说都是挑战，但我很感兴趣

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

所以我知道这一点。

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 个解决方案

解决方案1
0 已采纳 2017-09-15 22:55:47

如何将这个jQuery脚本转换为与带有JSON对象的jQuery.getJSON一起使用？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-15 22:55:47

解决方案1
0 已采纳 2017-09-15 22:55:47