Reputation: 294

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": "[email protected]",
        "phone": "+1 (949) 563-3174",
        "address": "107 Nevins Street, Titanic, Georgia, 5057"
}, {
        "id": 88,
        "age": 30,
        "name": "Briggs Robinson",
        "gender": "male",
        "company": "Otherway",
        "email": "[email protected]",
        "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);
});
    });

     });
});
});

Upvotes: 0

Answers (3)

user2314737

Reputation: 29317

Add some error checking to your JSON call as suggested in the docs

$.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" );
  });

and see if JSON data is loaded correctly. Also, check the console for error messages.

Upvotes: 0

Homen

Reputation: 1212

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": "[email protected]",
        "phone": "+1 (949) 563-3174",
        "address": "107 Nevins Street, Titanic, Georgia, 5057"
}, {
        "id": 88,
        "age": 30,
        "name": "Briggs Robinson",
        "gender": "male",
        "company": "Otherway",
        "email": "[email protected]",
        "phone": "+1 (804) 517-2941",
        "address": "897 Grand Street, Madaket, Ohio, 2793"
}
]

Upvotes: 1

Rajat Bhadauria

Reputation: 260

your JSON is wrong ....Please check the Correct JSON now .. you missed the ending Quotes in the JSON object. The correct JSON should be

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

you have lot of syntax Errors too in you JS implementation that too Syntax Errors.Please check the correct Implementations after

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

     });
});

Please try to check console in you browser for errors .

Upvotes: 0

jQuery Mobile: Can&#39;t retrieve JSON data to populate list on HTML

HTML:

JSON:

JQUERY:

Answers (3)

Related Questions

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