Question

如何在不重复我自己的情况下显示数据阵列中的所有内容，就像我在下面所做的那样。

    //  Program guide Rest

$(document).ready(function() {
  $.ajax({
    cache: false,
      url: "http://engrid2media.com/nextt/api/epg/schedule/id/",
    type: 'GET',
    crossDomain: true,
    dataType: 'json',
    success: function() {
        alert("EPG Success");
    },
    error: function() {
        alert('EPG Failed!');
    },
}).then(function(data) {
    var result = data [0];
    console.log(result);
    $('.ch-name').append(result.ch_name);
    $('.ch-logo').append(result.ch_logo);
    $('.ch-desc').append(result.ch_desc);
    $('.ch-genre').append(result.ch_genre);
    $('.ch-type').append(result.type);
    $('.ch-resolution').append(result.resolution);

    var result1 = data [1];
    console.log(result1);
    $('.ch-name1').append(result1.ch_name);
    $('.ch-logo1').append(result1.ch_logo);
    $('.ch-desc1').append(result1.ch_desc);
    $('.ch-genre1').append(result1.ch_genre);
       $('.ch-type1').append(result1.type);
    $('.ch-resolution1').append(result1.resolution);
    var result2 = data [2];
    console.log(result2);
    $('.ch-name2').append(result2.ch_name);
    $('.ch-logo2').append(result2.ch_logo);
    $('.ch-desc2').append(result2.ch_desc);
    $('.ch-genre2').append(result2.ch_genre);
    $('.ch-type2').append(result2.type);
    $('.ch-resolution2').append(result2.resolution);
    var result3 = data [3];
    console.log(result3);
    $('.ch-name3').append(result3.ch_name);
    $('.ch-logo3').append(result3.ch_logo);
    $('.ch-desc3').append(result3.ch_desc);
    $('.ch-genre3').append(result3.ch_genre);
    $('.ch-type3').append(result3.type);
    $('.ch-resolution3').append(result3.resolution);
    var result4 = data [4];
    console.log(result4);
    $('.ch-name4').append(result4.ch_name);
    $('.ch-logo4').append(result4.ch_logo);
    $('.ch-desc4').append(result4.ch_desc);
    $('.ch-genre4').append(result4.ch_genre);
    $('.ch-type4').append(result4.type);
    $('.ch-resolution4').append(result4.resolution);
    var result5 = data [5];
       console.log(result5);
    $('.ch-name5').append(result5.ch_name);
    $('.ch-logo5').append(result5.ch_logo);
    $('.ch-desc5').append(result5.ch_desc);
    $('.ch-genre5').append(result5.ch_genre);
    $('.ch-type5').append(result5.type);
    $('.ch-resolution5').append(result5.resolution);



});

});

这样可以正常工作，但是使用这种方法很难从数据库中显示20多个项目，因为我必须一个接一个地执行。

Answer 1

一个简单的for循环可以做到。

.then(function(data) {
    for (var i = 0; i < 6; ++i)
    {
        var prefix = (i == 0 ? "" : i.toString());

        $('.ch-name' + prefix).append(data[i].ch_name);
        $('.ch-logo' + prefix).append(data[i].ch_logo);
        $('.ch-desc' + prefix).append(data[i].ch_desc);
        $('.ch-genre' + prefix).append(data[i].ch_genre);
        $('.ch-type' + prefix).append(data[i].type);
        $('.ch-resolution' + prefix).append(data[i].resolution);

    }
});

Answer 2

为什么不编写辅助函数？

类似的东西。

function(data) {
  var result,
    suffix = '';
  for (var i in data) {
    result = data[i];
    if (i > 0) {
      suffix = i;
    }
    $('.ch-name' + suffix).append(result.ch_name);
    $('.ch-logo' + suffix).append(result.ch_logo);
    $('.ch-desc' + suffix).append(result.ch_desc);
    $('.ch-genre' + suffix).append(result.ch_genre);
    $('.ch-type' + suffix).append(result.type);
    $('.ch-resolution' + suffix).append(result.resolution);
  }
}

Answer 3

尝试使用$.each()

$.each(data, function(key, val) {
    var idx = key === 0 ? "" : key;
    $(".ch-name" + idx).append(val.ch_name);
    $(".ch-logo" + idx).append(val.ch_logo);
    $(".ch-desc" + idx).append(val.ch_desc);
    $(".ch-genre" + idx).append(val.ch_genre);
    $(".ch-type"+ idx).append(val.type);
    $(".ch-resolution" + idx).append(val.resolution);
});

如何使用javascript或jquery显示json resful数据

3 个答案: