如何在查看源代码中查看json文件数据

Question

假设我有一个json文件

我可以在我的脚本中读取此文件

$(document).ready(function () {
         $.ajax({
             type: "GET",
             url: "Package.html",
             dataType: "json",
             success: function (data) {
                 var t = '';


                 for (var i = 0; i < data.yearData.length; i++) {



                     var mainStoryTitle = data.yearData[i].players;
                     for (var j = 0; j < mainStoryTitle.length; j++) {
                         var storyTitle = mainStoryTitle[j].name;
                         var topStoryContent = mainStoryTitle[j].description;
                         var storyImage = mainStoryTitle[j].image;
                         t = t + '<div class="content">';
                         t = t + '<article class="topcontent">';
                         t = t + '<header class="top" id="top1"><h2>' + storyTitle + '</h2></header>';
                         t = t + '<header class="bottom">';
                         t = t + '<h6><img src="' + storyImage + '" height=150 width=200>' + '</h6></header>';
                         t = t + '<content class="hide" id="content_' + j + '"><p>' + topStoryContent + '</p></content>';
                         t = t + '</article>';
                         t = t + '</div>';
                         }

                 }


                 $(".content").html(t);

             },
             error: function (e, ts, et) { alert(ts) }

         })
     });

然后我把这个脚本放在我的html文件中。 因此，当我运行它，它工作正常，但问题是当我点击视图源，然后在里面它显示json的路径而不是精确的数据。 希望你遇到问题，请尽快回复我asap.thanx

Answer 1

使用console.log（ts）代替使用alert，这会将JSON文件发布到您的控制台中。从那里，您可以通过单击向下箭头轻松查看并查看JSON文件。

console.log(data); shows as:
> Object {Data: Array[2], ResponseMessage: "", Success: true}


console.log(JSON.stringify(data)); shows as:
{"Data":[{"ControllerID":2,"Description":"Aeon Power Monitor","DevType":1,"ID":1,"Name":"Power Monitor"},{"ControllerID":2,"Description":"Aeon Power Switch","DevType":2,"ID":2,"Name":"Switch"}],"ResponseMessage":"","Success":true}