jQuery Mobile & JSON - how to work with the JSON-response?

Question

I am currently wondering why I can't work with my JSON-result in JavaScript, anyone got an idea?

I do not get any alert, even if the result of the JSON-call is successfull (return code 200) and I can see the result in Firebug.

$(document).on('pageinit', function(event){

   ...

   $('.link').on('click', function (event) {

          var parm = $(this).attr("data-parm");
          var url = 'http://****:8000/service?parameter=' + parm;

          $.getJSON(url, function (data) {
             var result = $.parseJSON(data);
             alert(result[1].emnam);
             parse(result);
          });
   });

});

function parse( result ) {
      alert( 'parse function' );
}

My JSON result does look like this in the browser (via Firebug or Chrome-Dev-Tools)

{success: "true", 
msg: "Data retrieved", 
data: [
{pernr: "00001032", emnam: "Michaela"}, 
{pernr: "00001016", emnam: "Mike"},
{pernr: "00001024", emnam: "Frank"}
]}

At the end, I want to append the listview dynamically into my div #list, having pernr and the name as columns.. Thank you!

`.getJSON` already parses the JSON for you. `$.parseJSON(data)` will result in an error (I think). — Felix Kling, Jun 24 '13 at 13:03
thanks for the information, but it seems to have no effect on my output. — dotchuZ, Jun 24 '13 at 13:09
I don't know the problem yet, but no kind of access to the json object works, even data.data[1].emnam does not work... — dotchuZ, Jun 24 '13 at 13:35
it turned out that my JSON was not valid, but still can't get access to the JSON-string... I cant access the data-nodes in any case, data.data[1].pernr, data[1].pernr, data.pernr, does not work. — dotchuZ, Jun 25 '13 at 05:57

score 0 · Answer 1 · answered Jun 24 '13 at 13:09

You can do something like this: http://jsfiddle.net/balintbako/jEc8d/

var table = $("<table><thead><tr><th>1</th><th>2</th></tr></thead><tbody></tbody></table");
$(".someclass2").append(table);
$.each(data.data, function (i, item) {
    table.find("tbody").append("<tr><td>" + item.pernr + "</td><td>" + item.emnam + "</td></tr>");
});

score 0 · Answer 2 · answered Jun 24 '13 at 13:15

I got this code from the jqm-docs

<ul id="input_what" style="height:40px;width:100%;" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="xyz" data-filter-theme="d"></ul>

-

$( "#input_what" ).on( "listviewbeforefilter", function ( e, data ) {
    var $ul = $( this ),
        $input = $( data.input ),
        value = $input.val(),
        html = "";
    $ul.html( "" );
    if ( value && value.length > 2 ) {
        $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
        $ul.listview( "refresh" );
        $.ajax({
            url: 'http://****:8000/service?parameter=' + parm +'',
            dataType: "json",
            data: {
                term: $input.val()
            }
        })
        .then( function ( response ) {
            $.each( response, function ( i, val ) {
                html += "<li ><a class='completeItem' href='#'>" + val + "</a></li>";
            });
            $ul.html( html );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");
        }
        );
    }
});

jQuery Mobile & JSON - how to work with the JSON-response?

2 Answers2