从jquery中的xml数组中删除重复的项目

Question

我正在尝试消除 xml 输出中的重复元素。循环有效，但我需要跳过除第一个循环之外的所有循环中重复的 ID 和 PO 值。

现在，输出如下所示：

2 123456
1234567890：AA100
2 123456
0987654321：BB100

3 123456
11223345：CC00
3 123456
554433221：DD100

我试图让它看起来像：

2 123456
1234567890：AA100
0987654321：BB100

3 123456
11223345：CC00
554433221：DD100

这是我的代码 - 您可以在此处查看示例： https://codepen.io/BIGREDBOOTS/pen/VWQNBw

jQuery(function ($) {
   $("#dvContent").append("<p class='mainblock'></p>");
  var customerInfo = [];

  $.get("https://cdn.shopify.com/s/files/1/0453/8489/t/26/assets/sample.xml", function(xml) {
    $('manifest', xml).each(function() {
      var id = $(this).find('id').text();
      var po = $(this).find('po').text();
      var loc = {
        "UPC": $(this).find("upc").first().text(),
        "Contents": {
          "Item": $.map($(this).find("item").toArray(), function(manifest) {
            return {
              "ID": id,
              "PO": po,
              "UPC": $(manifest).find("upc").text(),
              "SKU": $(manifest).find("sku").text()
            };
          })
        }
      };
      customerInfo.push(loc);

      $("<div></div>").html($.map($(loc.Contents.Item).toArray(), function(manifest) {
        return '<div class="title">' + manifest.ID + ' ' + manifest.PO + '</div>' +
          '<span class="title">' + manifest.UPC + ": " + manifest.SKU + '</span> <br/>' ;
      }).join("")).append("<br>").appendTo("#dvContent p");
    });
  });
});   

Answer 1

好吧，我尝试改进您的代码并实现了所需要的......

（只需阅读代码 cmets）

// Constants
var MANIFEST_XML_URL = 'https://cdn.shopify.com/s/files/1/0453/8489/t/26/assets/sample.xml';

// Event handlers
$(document).ready(function() {
  loadManifestXml();
});

/**
 * Used to load 'manifest' XML from server
 */
function loadManifestXml() {
  $.get(MANIFEST_XML_URL, onGetManifest);
}

/**
 * Used as a callback when loading 'manifest' XML from server
 *
 * @param {Object} response - The server response
 */
function onGetManifest(response) {
  // Parse and display data
  var data = getManifestData(response),
      html = getManifestHtml(data);

  if (html) {
     $('#content').html(html);
  }
}

/**
 * Used to marshal 'manifest' XML server response
 *
 * @param {Object} response - The server response
 * @returns {Object[]} data - An array of objects 
 */
function getManifestData(response) {
  var data;

  if (response) {
    data = $('manifest', response).map(function(i, manifest) {
      manifest = $(manifest);

      var cfg = {
          id: manifest.find('id').text(),
          po: manifest.find('po').text(),
          items: []
        },
        items = manifest.find('contents item');

      items.each(function(j, item) {
        item = $(item);

        cfg.items.push({
          sku: item.find('sku').text(),
          upc: item.find('upc').text()
        });
      });

      return cfg;
    });
  }

  return data || []; // Map can return 'null' so force it to be an 'Array'
}

/**
 * Used to build a HTML with 'manifest' data
 *
 * @param {Object[]} data - An array of objects
 * @returns {String} html
 */
function getManifestHtml(data) {
  var html = '';

  for (var i = 0; i < (data || []).length; ++i) {
    var obj = data[i];

    if (obj) {
      html = html + '<b>' + obj.id + ' ' + obj.po + '</b><br>';

      var items = obj.items;

      for (var j = 0; j < (items || []).length; ++j) {
        var item = items[j];

        if (item) {
            html = html + item.upc + ': ' + item.sku + '<br>';
        }
      }

      html = html + '<br>';
    }
  }

  return html;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
</div>

Answer 2

请考虑使用 Object 而不是 Array：

jQuery(function($) {
  var customerInfo = {};

  $.get("https://cdn.shopify.com/s/files/1/0453/8489/t/26/assets/sample.xml", function(xml) {

    $('manifest', xml).each(function(n, m) {
      var id = $(m).find('id').text(),
        po = $(m).find('po').text();
      if (!customerInfo[id + ' ' + po]) customerInfo[id + ' ' + po] = [];

      $(m).find('item').each(function(n, i) {
        customerInfo[id + ' ' + po]
          .push({
            "UPC": $(i).find("upc").text(),
            "SKU": $(i).find("sku").text()
          })
      });
    });

    $("<div></div>").html(
      Object.keys(customerInfo).map(function(k) {
        return '<div class="title">' + k + '</div>' +
          customerInfo[k].map(function(i) {
            return '<span class="title">' + i.UPC + ": " + i.SKU + '</span><br>'
          }).join('')
      }).join('<br>')
    ).appendTo("#dvContent");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvContent"></div>

另外，将<div> 附加到<p> 也是无效的，所以我省略了它。