【问题标题】：jQuery Mobile: Can't retrieve JSON data to populate list on HTMLjQuery Mobile：无法检索 JSON 数据以填充 HTML 上的列表
【发布时间】：2016-08-22 07:11:26
【问题描述】：

我只是 jQuery Mobile 的新手，所以我不确定在搜索中使用什么术语，所以这可能是重复的。

我正在尝试使用 jQuery Mobile 和 JSON 创建一个简单的列表应用程序，但我似乎无法从我的 JSON 文件中检索数据。我从another Stack Overflow question 那里得到了我的代码had this jsfiddle，我几乎可以肯定我已经正确地复制了它，但是当我在我的本地主机上打开它时，我的第一个“页面”中没有填充任何列表项。

我对此真的很陌生，所以我非常感谢您对答案的任何解释和任何帮助！

控制台错误是：

jquery-1.11.1.min.js:4 GET localhost/ListApp/html/JSON/list_data.json 404（未找到）
VM1411:5 未捕获的类型错误：无法读取 null 的属性“removeAttribute”
Uncaught SyntaxError: Unexpected token : on my jquery mobile js files

到目前为止，这是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>LIST APP</title>

    <link rel="stylesheet"href="../CSS/stylesheet.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile.theme-1.4.5.min.css"/>
    <link ref="stylesheet" href="../CSS/jquery.mobile.icons-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile.structure-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/bootstrap.min.css"/>


    <script src="../JS/jquery-1.11.1.min.js"></script>
    <script src="../JS/jquery.mobile-1.4.5.min.js"></script>
    <script src="../JS/jquery.mobile.structure-1.4.5.min.css"></script>
    <script src="../JS/jquery.mobile.theme-1.4.5.min.css"></script>
    <script src="../JS/jquery.mobile.icons-1.4.5.min.css"></script>
    <script src="../JS/bootstrap.min.js"></script>
    <script src="../JS/listApp.js"></script>


</head>

 <body>
<div data-role="page" id="filterPage">
    <div data-role="header" data-theme="b">
         <h1>List App</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" id="mainList" data-divider-theme="a" data-inset="false">
            <li data-role="list-divider" data-theme="b" role="heading">Names</li>
        </ul>
    </div>
</div>  


    <div data-role="page" id="secondaryDetails">
        <div data-role="content"></div>
        </div>            
    </div>

</body>   

</html>

JSON：

var info = [{
        "id": 89,
        "age": 35,
        "name": "Amelia Mcknight",
        "gender": "female",
        "company": "Colaire",
        "email": "ameliamcknight@colaire.com",
        "phone": "+1 (949) 563-3174",
        "address": "107 Nevins Street, Titanic, Georgia, 5057"
}, {
        "id": 88,
        "age": 30,
        "name": "Briggs Robinson",
        "gender": "male",
        "company": "Otherway",
        "email": "briggsrobinson@otherway.com",
        "phone": "+1 (804) 517-2941",
        "address": "897 Grand Street, Madaket, Ohio, 2793"
},
];

JQUERY：

$.getJSON("../JSON/list_data.json", function(info){

$(document).on("pageinit", "#mainList", function () {

    var li = "";
    $.each(data, function (i, name) {
        li += '<li><a href="#" id="' + i + '" class="info-go">' + name.name + '</a></li>';

    $("#mainList").append(li).promise().done(function () {

        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();
            $("#secondaryDetails").data("info", info[this.id]);
          index.html#secondaryDetails

            $.mobile.changePage("#secondaryDetails");
        });


        $(this).listview("refresh");

});

$(document).on("pagebeforeshow", "#secondaryDetails", function () {

    var info = $(this).data("info");

    var info_view = "";

    for (var key in info) {
        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }

    $(this).find("[data-role=content]").html(info_view);
});
    });

     });
});
});

【问题讨论】：

您在控制台看到的错误是什么？
list_data.json 实际上是否包含var info =，如图所示？（如果是这样，那不是有效的 JSON。）第一项的 "address" 属性也缺少结束 "。
你真的用数据填充了 html 吗？因为您没有使用 Json 信息进行填充，而是使用 data.name ...您应该使用 info.name
@nnnnnn 它确实有var info =，因为这就是我复制的示例中的显示方式？但我已将其更改为 { "info": [ { ... }, { ... }, ]} 仍然没有运气
@user2181397 控制台说“Uncaught TypeError: can not read property of type error null”也说 jquery 文件中有语法错误。

标签： javascript jquery html json jquery-mobile

【解决方案1】：

试试下面的代码。

HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>LIST APP</title>

  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
    <script>
	
$(document).on("pageinit", "#filterPage", function () {
$.getJSON("../JSON/list_data.json", function(info){
    var li = "";
    $.each(info, function (i, name) {
        li += '<li><a href="#" id="' + i + '" class="info-go">' + name.name + '</a></li>';

    $("#mainList").append(li).promise().done(function () {

        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();
            $("#secondaryDetails").data("info", info[this.id]);
          

            $.mobile.changePage("#secondaryDetails");
        });


        $(this).listview("refresh");
	});
});
});
});



$(document).on("pagebeforeshow", "#secondaryDetails", function () {

    var info = $(this).data("info");

    var info_view = "";

    for (var key in info) {
        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }

    $(this).find("[data-role=content]").html(info_view);
});
	
	
	</script>


</head>

 <body>
<div data-role="page" id="filterPage">
    <div data-role="header" data-theme="b">
         <h1>List App</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" id="mainList" data-divider-theme="a" data-inset="false">
            <li data-role="list-divider" data-theme="b" role="heading">Names</li>
        </ul>
    </div>
</div>  


    <div data-role="page" id="secondaryDetails">
        <div data-role="content"></div>
        </div>            
    </div>

</body>   

</html>

JSON 文件：

[{
        "id": 89,
        "age": 35,
        "name": "Amelia Mcknight",
        "gender": "female",
        "company": "Colaire",
        "email": "ameliamcknight@colaire.com",
        "phone": "+1 (949) 563-3174",
        "address": "107 Nevins Street, Titanic, Georgia, 5057"
}, {
        "id": 88,
        "age": 30,
        "name": "Briggs Robinson",
        "gender": "male",
        "company": "Otherway",
        "email": "briggsrobinson@otherway.com",
        "phone": "+1 (804) 517-2941",
        "address": "897 Grand Street, Madaket, Ohio, 2793"
}
]

【讨论】：

当我尝试在本地运行此代码时，它不会打开，只是继续加载。我想当我试图将 JSON 数据移动到它自己的文件时，我的编码是错误的。如果我的数据有一个 .json 文件和一个 .js 文件而不是一个文件，你能像这样编写代码吗？另外，“..更改 html 页面中的 javaScript src 链接”是什么意思。是不是我的 js 版本不对？
意味着你想要没有.js文件和一个.json文件
我的意思是这一行 <script src="js/js.js"></script> 。我告诉要更改为您的 .js 文件的 URL
我没有关注。我已经有一个名为"../JS/listApp.js" 的js 文件，我需要再做一个吗？我想将我的"../JS/listApp.js" 和"../JSON/list_data.json" 文件分开保存，而不是放在一个文件中，就像我的问题一样。
只使用这个html代码并将Json数据放入list_data.json文件中

【解决方案2】：

您的 JSON 错误 ....请立即检查正确的 JSON .. 您错过了 JSON 对象中的结尾引号。正确的 JSON 应该是

var info = [{
            "id": 89,
            "age": 35,
            "name": "Amelia Mcknight",
            "gender": "female",
            "company": "Colaire",
            "email": "ameliamcknight@colaire.com",
            "phone": "+1 (949) 563-3174",
            "address": "107 Nevins Street, Titanic, Georgia, 5057"
    }, {
            "id": 88,
            "age": 30,
            "name": "Briggs Robinson",
            "gender": "male",
            "company": "Otherway",
            "email": "briggsrobinson@otherway.com",
            "phone": "+1 (804) 517-2941",
            "address": "897 Grand Street, Madaket, Ohio, 2793"
    },
    ];

在你的 JS 实现中也有很多语法错误，也有语法错误。请在之后检查正确的实现

$.getJSON(info, function(info){

$(document).on("pageinit", "#mainList", function () {

    var li = "";
    $.each(data, function (i, name) {
        li += '<li><a href="#" id="' + i + '" class="info-go">' + name.name + '</a></li>';

    $("#mainList").append(li).promise().done(function () {

        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();
            $("#secondaryDetails").data("info", info[this.id]);

            $.mobile.changePage("#secondaryDetails");
        });


        $(this).listview("refresh");

});

$(document).on("pagebeforeshow", "#secondaryDetails", function () {

    var info = $(this).data("info");

    var info_view = "";

    for (var key in info) {
        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }

    $(this).find("[data-role=content]").html(info_view);
});
    });

     });
});

请尝试在浏览器中检查控制台是否有错误。

【讨论】：

我已经复制了您的代码，但仍然无法正常工作。控制台说“未捕获的 TypeError：无法读取类型错误 null 的属性”也表示 jquery 文件中存在语法错误。

【解决方案3】：

按照docs 中的建议为您的 JSON 调用添加一些错误检查

$.getJSON( "../JSON/list_data.json", function(info){
  // your function
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
  .always(function() {
    console.log( "complete" );
  });

并查看 JSON 数据是否正确加载。另外，检查控制台是否有错误消息。

【讨论】：

我在$.getJSON( "../JSON/list_data.json", function(info)下面添加这个吗？？如果是这样，我的控制台中没有收到这些 console.log 消息。控制台说“未捕获的 TypeError：无法读取类型错误 null 的属性”也表示 jquery 文件中存在语法错误。
好的，所以我修复了一个错误，现在我收到消息“错误”和“完成”。还有另一个错误说“ jquery-1.11.1.min.js:4 GET localhost/ListApp/html/JSON/list_data.json 404 (Not Found) 为什么说 ListApp/html/JSON?? 它不应该直接进入 JSON 吗？
@carbon_unicorn 我更新了失败函数，以便它在控制台上显示错误消息。从那里你应该能够看到什么是错误的并纠正它