jquery - 从数组中删除特定对象并显示表中剩余的内容

Question

我正在努力删除一个值为(未设置)的对象，并在表中显示剩余的对象。

我能够删除该对象，但是当我尝试显示表格中的剩余对象时，所有对象都会出现，包括已删除的对象。有人可以看看我做错了什么吗？

HTML:

<table class="tg" id="adwords_table" border='1'>
    <tr>
        <th class="tg-031e" rowspan="2">Campaign ID</th>
        <th class="tg-yw4l" colspan="5">Acquisition</th>
        <th class="tg-yw4l" colspan="2">Conversions</th>
    </tr>
    <tr>
        <td class="table-parent tg-yw4l">Clicks</td>
        <td class="table-parent tg-yw4l">Cost</td>
        <td class="table-parent tg-yw4l">CPC</td>
        <td class="table-parent tg-yw4l">CTR</td>
        <td class="table-parent tg-yw4l">Impressions</td>
        <td class="table-parent tg-yw4l">Goal Conversion Rate</td>
        <td class="table-parent tg-yw4l">Goal Completions</td>
    </tr>
    <tr>
        <td class="tg-yw4l"></td>
        <td class="tg-yw4l gapiTotalAdClicks"></td>
        <td class="tg-yw4l gapiTotalAdCost">$</td>
        <td class="tg-yw4l gapiTotalAdCPC">$</td>
        <td class="tg-yw4l gapiTotalAdCTR">%</td>
        <td class="tg-yw4l gapiTotalAdImpressions"></td>
        <td class="tg-yw4l gapiTotalAdconversions">%</td>
        <td class="tg-yw4l gapiTotalAdCompletions"></td>
    </tr>
</table>

JS:

var adw = [{"campaign": "(not set)", "rpc": "0.0", "ctr": "0.0", "cpc": "0.0", "impressions": "0", "adclicks": "0", "adcost"
            : "0.0", "ROAS": "0.0", "goalCompletionsAll": "189", "goalConversionRateAll": "10.830945558739256"}, {"campaign"
            : "Dynamic Search Ad Test", "rpc": "0.5", "ctr": "2.7155465037338766", "cpc": "12.0415", "impressions": "1473"
            , "adclicks": "40", "adcost": "481.66", "ROAS": "4.152306606319811", "goalCompletionsAll": "4", "goalConversionRateAll"
            : "12.903225806451612"}, {"campaign": "Raleigh Durham", "rpc": "0.13513513513513514", "ctr": "0.9716386554621849"
            , "cpc": "15.848378378378378", "impressions": "3808", "adclicks": "37", "adcost": "586.39", "ROAS": "0.8526748409761422"
            , "goalCompletionsAll": "1", "goalConversionRateAll": "3.0303030303030303"}, {"campaign": "Sanford", "rpc": "0.0", "ctr": "2.3214285714285716", "cpc": "5.246153846153846", "impressions": "560", "adclicks": "13", "adcost"
            : "68.2", "ROAS": "0.0", "goalCompletionsAll": "0", "goalConversionRateAll": "0.0"}];

jQuery(function () {

    jQuery.each(adw, function (i, val) {

        if (val.campaign == "(not set)") // delete index
        {
            delete adw[i];
            console.log(adw);
        }

        var adwordsHTML = ''

        adwordsHTML += '<tr><td class="tg-yw4l">' + val.campaign + '</td><td class="tg-yw4l">' + val.adclicks + '</td><td class="tg-yw4l">$' + val.adcost + '</td><td class="tg-yw4l">$' + (+val.cpc).toFixed(2) + '</td><td class="tg-yw4l">' + (+val.ctr).toFixed(2) + '%</td><td class="tg-yw4l">' + val.impressions + '</td><td class="tg-yw4l">%' + (+val.goalConversionRateAll).toFixed(2) + '</td><td class="tg-yw4l">' + val.goalCompletionsAll + '</td></tr>';

        jQuery('#adwords_table').append(adwordsHTML);

    });
});

这也是一个 fiddle :http://jsfiddle.net/javapatriot/ChpFu/283/

Answer 1

有趣的地方在于每个内部:“if”没有“else”部分。正确的是:

        $.each(adw, function (i, val) {
            if (val.campaign == "(not set)") // delete index
            {
                delete adw[i];
                console.log(adw);
            } else {
                var adwordsHTML = ''
                adwordsHTML += '<tr><td class="tg-yw4l">' + val.campaign + '</td><td class="tg-yw4l">' + val.adclicks + '</td><td class="tg-yw4l">$' + val.adcost + '</td><td class="tg-yw4l">$' + (+val.cpc).toFixed(2) + '</td><td class="tg-yw4l">' + (+val.ctr).toFixed(2) + '%</td><td class="tg-yw4l">' + val.impressions + '</td><td class="tg-yw4l">%' + (+val.goalConversionRateAll).toFixed(2) + '</td><td class="tg-yw4l">' + val.goalCompletionsAll + '</td></tr>';
                $('#adwords_table').append(adwordsHTML);
            }
        });

代码片段:

var adw = [{
  "campaign": "(not set)",
  "rpc": "0.0",
  "ctr": "0.0",
  "cpc": "0.0",
  "impressions": "0",
  "adclicks": "0",
  "adcost": "0.0",
  "ROAS": "0.0",
  "goalCompletionsAll": "189",
  "goalConversionRateAll": "10.830945558739256"
}, {
  "campaign": "Dynamic Search Ad Test",
  "rpc": "0.5",
  "ctr": "2.7155465037338766",
  "cpc": "12.0415",
  "impressions": "1473"
  ,
  "adclicks": "40",
  "adcost": "481.66",
  "ROAS": "4.152306606319811",
  "goalCompletionsAll": "4",
  "goalConversionRateAll": "12.903225806451612"
}, {
  "campaign": "Raleigh Durham",
  "rpc": "0.13513513513513514",
  "ctr": "0.9716386554621849"
  ,
  "cpc": "15.848378378378378",
  "impressions": "3808",
  "adclicks": "37",
  "adcost": "586.39",
  "ROAS": "0.8526748409761422"
  ,
  "goalCompletionsAll": "1",
  "goalConversionRateAll": "3.0303030303030303"
}, {
  "campaign": "Sanford",
  "rpc": "0.0",
  "ctr": "2.3214285714285716",
  "cpc": "5.246153846153846",
  "impressions": "560",
  "adclicks": "13",
  "adcost": "68.2",
  "ROAS": "0.0",
  "goalCompletionsAll": "0",
  "goalConversionRateAll": "0.0"
}];

$(function () {
  $.each(adw, function (i, val) {
    if (val.campaign == "(not set)") // delete index
    {
      delete adw[i];
      //console.log(adw);
    } else {
      var adwordsHTML = ''
      adwordsHTML += '<tr><td class="tg-yw4l">' + val.campaign + '</td><td class="tg-yw4l">' + val.adclicks + '</td><td class="tg-yw4l">$' + val.adcost + '</td><td class="tg-yw4l">$' + (+val.cpc).toFixed(2) + '</td><td class="tg-yw4l">' + (+val.ctr).toFixed(2) + '%</td><td class="tg-yw4l">' + val.impressions + '</td><td class="tg-yw4l">%' + (+val.goalConversionRateAll).toFixed(2) + '</td><td class="tg-yw4l">' + val.goalCompletionsAll + '</td></tr>';
      $('#adwords_table').append(adwordsHTML);
    }
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table class="tg" id="adwords_table" border='1'>
    <tr>
        <th class="tg-031e" rowspan="2">Campaign ID</th>
        <th class="tg-yw4l" colspan="5">Acquisition</th>
        <th class="tg-yw4l" colspan="2">Conversions</th>
    </tr>
    <tr>
        <td class="table-parent tg-yw4l">Clicks</td>
        <td class="table-parent tg-yw4l">Cost</td>
        <td class="table-parent tg-yw4l">CPC</td>
        <td class="table-parent tg-yw4l">CTR</td>
        <td class="table-parent tg-yw4l">Impressions</td>
        <td class="table-parent tg-yw4l">Goal Conversion Rate</td>
        <td class="table-parent tg-yw4l">Goal Completions</td>
    </tr>
    <tr>
        <td class="tg-yw4l"></td>
        <td class="tg-yw4l gapiTotalAdClicks"></td>
        <td class="tg-yw4l gapiTotalAdCost">$</td>
        <td class="tg-yw4l gapiTotalAdCPC">$</td>
        <td class="tg-yw4l gapiTotalAdCTR">%</td>
        <td class="tg-yw4l gapiTotalAdImpressions"></td>
        <td class="tg-yw4l gapiTotalAdconversions">%</td>
        <td class="tg-yw4l gapiTotalAdCompletions"></td>
    </tr>
</table>