cigarette_unicorn cigarette_unicorn - 3 months ago 17
JSON Question

jQuery Mobile: Can't retrieve JSON data to populate list on HTML

I'm only new to jQuery Mobile so I was unsure of what terminology to use in my search so this might be a duplicate.

I am trying to create a simple list app using jQuery Mobile and JSON but I can not seem to retrieve the data from my JSON file. I got my code from another Stack Overflow question which had this jsfiddle and I am almost sure I have copied it correctly but when I open it on my localhost there are no list items populated to my first 'page'.

I am really new to this so I would very much appreciate any explanation to your answers and any help at all!

Console Errors are:


  • jquery-1.11.1.min.js:4 GET localhost/ListApp/html/JSON/list_data.json 404 (Not Found)

  • VM1411:5 Uncaught TypeError: Cannot read property 'removeAttribute' of null

  • Uncaught SyntaxError: Unexpected token : on my jquery mobile js files



Here us my code so far:

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);
});
});

});
});
});

Answer

Try the following code.

HTML file :

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

[{
        "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"
}
]