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

I wondered if someone could help, I am sure this is a pretty simple thing but I have 'googled' so much now and found a few results which do not work for me.

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

Basically I have an xml file (data.xml), the structure is as follows

基本上我有一个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>

So what I would like to do is display the data grouped by 'group' and sorted alphabetically both parent and child as follows

所以我想要做的是显示按“组”分组的数据,并按字母顺序对父和子进行排序,如下所示

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

I will be using html, jQuery / ajax, data.xml file

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

I hope someone can help a complete n00b!

我希望有人可以帮助完整的n00b!

Thanks in advance

提前致谢

1 个解决方案

#1

I'm using in this example the following:

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

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

It's easy to manipulate Literal objects than nodes in XML.

与XML中的节点相比,操纵Literal对象很容易。

$(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>

Hope this helps.

希望这可以帮助。

Update: By using .toLowerCase() function to sort always words in lowercase.

更新:使用.toLowerCase()函数对小写字母进行排序。

I'm using dynamic id in the <ul> list. The id attribute in the ul tag must be without spaces, then I'm using: .replace(" ", "").replace(" ", ""). You can see in the DOM.

我在

列表中使用动态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>