使用jQuery ajax xml数据文件对xml文件数据进行分组并显示在无序列表中

Question

我想知道是否有人可以提供帮助，我确信这是一件非常简单的事情，但我现在已经“谷歌”了这么多，发现了一些对我不起作用的结果。

基本上我有一个xml文件（data.xml），结构如下

<data>
<food>
    <name>Belgian Waffles</name>
    <group>waffle</group>
    <price>$5.95</price>
    <description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
    <calories>650</calories>
</food>
<food>
    <name>Strawberry Belgian Waffles</name>
    <group>waffle</group>
    <price>$7.95</price>
    <description>Light Belgian waffles covered with strawberries and whipped cream</description>
    <calories>900</calories>
</food>
<food>
    <name>Berry-Berry Belgian Waffles</name>
    <group>waffle</group>
    <price>$8.95</price>
    <description>Light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
    <calories>900</calories>
</food>
<food>
    <name>French Toast</name>
    <group>Toast</group>
    <price>$4.50</price>
    <description>Thick slices made from our homemade sourdough bread</description>
    <calories>600</calories>
</food>
<food>
    <name>Homestyle Breakfast</name>
    <group>Toast</group>
    <price>$6.95</price>
    <description>Two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
    <calories>950</calories>
</food>
</data>

所以我想做的是显示按“组”分组的数据，并按父子字母顺序排序，如下所示

Waffle
    Belgian Waffles
    Berry-Berry Belgian Waffles
    Strawberry Belgian Waffles
    ...
Toast
    French Toast
    Homestyle Breakfast
    ...

我将使用 html、jQuery/ajax、data.xml 文件

希望有人能帮助一个完整的n00b！

提前致谢

Answer 1

我在这个例子中使用了以下内容：

• jQuery 1.11.1.
• x2js https://code.google.com/p/x2js/

Literal 对象比 XML 中的节点更容易操作。

$(function() {
  $.ajax({
    url: "https://gist.githubusercontent.com/dannyjhonston/c8bb58e329252882aa8f/raw/a29755923ea1d43af4413405b77a5ef02e9efd6c/data.xml",
    type: "GET",
    dataType: "xml",
  }).done(function(response) {
    var x2js = new X2JS(); // Declare an instance from X2JS().
    var json = {}; // Declare the json object.
    var oSerializer = new XMLSerializer(); // Declare an instance from XMLSerializer().
    // $(response).find("data")[0] contains a document fragment from the response xml.
    var xmlString = oSerializer.serializeToString($(response).find("data")[0]); // Serialize the document fragment into XML string.
    json = x2js.xml_str2json(xmlString); // Convert the XML string to JSON.

    // By using Javascript we can sort array of objects.
    // Sorting the group.
    json.data.food = json.data.food.sort(function(a, b) {
      return a.group - b.group;
    });


    var x = {}; // Declare an object to store the ordered data.
    // json.data.food contains an array of objects.
    for (var i = 0; i < json.data.food.length; ++i) {
      var obj = json.data.food[i];
      if (x[obj.group] === undefined) {
        x[obj.group] = [];
      }
      x[obj.group].push(obj);
    }

    // Sorting the names.
    for (i in x) {
      x[i] = x[i].sort(function(a, b) {
        return b.name < a.name;
      });
    }

    // Printing the list in the page.
    $.each(x, function(a, b) {
      $("#list").append("<li>" + a + "<ul id=\"" + a + "\"></ul></li>"); // Print the group values.
      for (var i = 0; i < b.length; i++) {
        $("#list #" + a).append("<li>" + b[i].name + "</li>"); // Print the name of each group.
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://x2js.googlecode.com/hg/xml2json.js"></script>
<ul id="list"></ul>

希望这会有所帮助。

更新：通过使用.toLowerCase() 函数将单词始终以小写形式排序。

我在<ul> 列表中使用动态ID。 ul标签中的id属性必须不带空格，那么我用的是：.replace(" ", "").replace(" ", "")。你可以在 DOM 中看到。

$(function() {
  $.ajax({
    url: "https://gist.githubusercontent.com/JimBobUKII/1ecb51bce61b5b03ebad/raw/2f65f896b197b68ece6cbdfa116b8e645f9b732a/data.xml",
    type: "GET",
    dataType: "xml",
  }).done(function(response) {
    var x2js = new X2JS(); // Declare an instance from X2JS().
    var json = {}; // Declare the json object.
    var oSerializer = new XMLSerializer(); // Declare an instance from XMLSerializer().
    // $(response).find("data")[0] contains a document fragment from the response xml.
    var xmlString = oSerializer.serializeToString($(response).find("data")[0]); // Serialize the document fragment into XML string.
    json = x2js.xml_str2json(xmlString); // Convert the XML string to JSON.

    // By using Javascript we can sort array of objects.
    // Sorting the group.
    json.data.food = json.data.food.sort(function(a, b) {
      return a.group.toLowerCase() < b.group.toLowerCase();
    });

    var x = {}; // Declare an object to store the ordered data.
    // json.data.food contains an array of objects.
    for (var i = 0; i < json.data.food.length; ++i) {
      var obj = json.data.food[i];
      if (x[obj.group] === undefined) {
        x[obj.group] = [];
      }
      x[obj.group].push(obj);
    }

    // Sorting the names.
    for (i in x) {
      x[i] = x[i].sort(function(a, b) {
        return b.name.toLowerCase() < a.name.toLowerCase();
      });
    }

    // Printing the list in the page.
    $.each(x, function(a, b) {
      $("#list").append("<li>" + a + "<ul id=\"" + a.replace(" ", "").replace(" ", "") + "\"></ul></li>"); // Print the group values.
      for (var i = 0; i < b.length; i++) {
        $("#list #" + a.replace(" ", "").replace(" ", "")).append("<li><a href=\"#" + b[i].id + "\">" + b[i].name + "</a></li>"); // Print the name of each group.
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://x2js.googlecode.com/hg/xml2json.js"></script>
<ul id="list"></ul>