0

json オブジェクト配列を送信している場合、jquery ajax メソッドはコンテンツを解析し、 jquery のリストビューにデータを表示できますが、オブジェクトが 1 つしかない場合、同じ jquery ajax メソッドはデータを解析できません。

ここに私のjsonオブジェクト配列：

{"menuService":[{"idmenu":"0","itemCatagory":"Main Course","itemDescription":"Food from UP","itemImagePath":"http://localhost:8080/fotservice/ItemImage?id=Steam Rice","itemName":"Steam Rice","rate":"100.5","subItemName":"Half Plate Steam Rice","subItemNameRate":"100.5"},{"idmenu":"5","itemCatagory":"Main Course","itemDescription":"tasty lunch","itemImagePath":"http://localhost:8080/fotservice/ItemImage?id=Lunch Combo(raita,rice,dal,salad)","itemName":"Lunch Combo(raita,rice,dal,salad)","rate":"123.0","subItemName":"lunch(dal,rice)","subItemNameRate":"100.5"}]}

ここに私の単一のjsonオブジェクトがあります:

{"menuService":{"idmenu":"2","itemCatagory":"xyz","itemDescription":"fghjkl;","itemImagePath":"http://localhost:8080/fotservice/ItemImage?id=Dal makhni","itemName":"Dal makhni","rate":"121.5","subItemName":"Half plate Dal makhni","subItemNameRate":"121.56"}}

ここに私のjquery ajaxメソッドがあります:

$.ajax({
    url: "http://localhost:8080/fotservice/rest/menu/"+cat+"/items",  
    type: 'GET',
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function( response ) {
        var markup = "";
        $.each(response.menuService, function(index, result) { 
            var $template = $('<div><li> <a data-transition="slide" href="desc.html?cat='+result.itemName+'" rel="external" > <img class="profile"> <p class="from"> </p><p class="tweet"> </p></li></a></div>');
            $template.find(".profile").attr("src", result.itemImagePath);
            $template.find(".from").append(result.itemDescription);

            markup += $template.html();
        });
        $( "#tweet-list" ).append(markup).listview( "refresh", true ); // The true parameter indicates we want to refresh the entire list, not just the list items. 

    },
    timeout: 6000,  // Timeout after 6 seconds
    error: function(jqXHR, textStatus, errorThrown) {
        console.log("Error, textStatus: " + textStatus + " errorThrown: "+ errorThrown);

        $.mobile.hidePageLoadingMsg();

        //show error message
        $( "<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"+ $.mobile.pageLoadErrorMessage +"</h1></div>" )
            .css({ "display": "block", "opacity": 0.96, "top": 100 })
            .appendTo( $.mobile.pageContainer )
            .delay( 800 )
            .fadeOut( 1000, function() {
                $( this ).remove();
            });
    }
});

jquery getjson メソッドを試しましたが、それも同じ動作をしています。

4

4 に答える 4

0

response.menuService が jquery タイプの配列であるかどうかを確認します。そうでない場合は作成します。

var success = function(response) {
    var markup = "";
    var arrayResponse;
    console.log(response.menuService);
    if ($.type(response.menuService) !== 'array') {
        var arrayResponse = [];
        arrayResponse.push(response.menuService);
    } else {
        arrayResponse = response.menuService; 
    }
    console.log(arrayResponse);
    $.each(arrayResponse, function(index, result) { 
        $('#list').append('<div>' + result.idmenu + '</div>');
    });
};

var response = {"menuService":[{"idmenu":"0"}]};

success(response);

var response = {"menuService":{"idmenu":"2"}};

success(response);

テストできるようにjsフィドルを作成しました：http://jsfiddle.net/U72p2/

于 2013-07-20T19:06:24.820 に答える
0

で配列かどうかを確認できますArray.isArray。そうでない場合は、配列でラップするため、一貫して$.each機能します

success: function( response ) {
    var markup = "";
    var menuService = Array.isArray(response.menuService) ? response.menuService : [response.menuService];

    $.each(menuService, function(index, result) { 
        ...
    });

    ...
于 2013-07-20T19:07:52.710 に答える