jquery读取嵌套XML-缺少两个值答案

【问题标题】：jquery reads Nested XML- missing two valuesjquery读取嵌套XML-缺少两个值
【发布时间】：2017-06-30 13:43:28
【问题描述】：

我有嵌套的 XML 数据，我需要将所有值输出到 HTML 文件中。我有一部分工作 - 显示“内容”部分的输出，但我无法弄清楚如何让“id”和“po”值也显示出来。 XML 来自另一台服务器，所以我无法修改它。

半工作示例： https://codepen.io/BIGREDBOOTS/pen/VWQNBw

<manifests>
    <manifest>
        <slip>
            <id>2</id>
            <po>123456</po>
        </slip>
        <contents>
            <item>
                <sku>AA100</sku>
                <upc>1234567890</upc>
            </item>
            <item>
                <sku>BB100</sku>
                <upc>0987654321</upc>
            </item>
        </contents>
    </manifest>
    <manifest>
        <slip>
            <id>3</id>
            <po>123456</po>
        </slip>
        <contents>
            <item>
                <sku>CC00</sku>
                <upc>11223345</upc>
            </item>
            <item>
                <sku>DD100</sku>
                <upc>554433221</upc>
            </item>
        </contents>
    </manifest>
</manifests>

到目前为止，这是我的脚本。

jQuery(function ($) {
    $("#divContent").append("<p class='mainblock'></p>");
    var mainInfo = [];                    
    $.get("data.xml", function (xml) {
        $('manifest', xml).each(function () {
            var loc = {
                "UPC": $(this).find("upc").first().text(),
                "Contents": {
                    "Item": $.map($(this).find("item").toArray(), function (manifest) {
                        return { "UPC": $(manifest).find("upc").text(), "SKU": $(manifest).find("sku").text() };
                    })
                }
            };
            mainInfo.push(loc);

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

只要将块组合在一起，我就不会关心它在 HTML 中的外观。

【问题讨论】：

在$('manifest', xml) 循环中，使用$(this).find('id').text()
@RoryMcCrossan - 没用 - 我仍然不确定。我用 codepen 更新以进行澄清
你做错地方了。我为你添加了答案

标签： javascript jquery ajax xml

【解决方案1】：

您需要从外部each 循环内的id 和po 元素中检索文本：

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 manifest.ID + ' ' + manifest.UPC + ": " + manifest.SKU + ": " + "<br/>";
      }).join("")).append("<br>").appendTo("#dvContent p");
    });
  });
});

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

【讨论】：