javascript - 如何使用 JQuery 展平 XML 树？

Question

我的食品开发应用程序需要展平 XML 树。听起来很容易，但我遇到了障碍。该算法要求所有<stream>...</stream>具有子节点的节点 <disposition>Break out overall</disposition>节点到顶层<root>...</root>节点。

之前:

<root>
    <stream>
        <name>Corn Oil</name>
        <quantity>0.3</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Potatoes</name>
        <quantity>0.5</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Seasoning</name>
        <quantity>0.1</quantity>
        <disposition>Break out overall</disposition>
        <isstream>true</isstream>
        <stream>
            <name>Salt</name>
            <quantity>0.02</quantity>
            <disposition>Break out overall</disposition>
        </stream>
        <stream>
            <name>Maltodextrin</name>
            <quantity>0.03</quantity>
            <disposition>Break out overall</disposition>
        </stream>
        <stream>
            <name>Spice Blend</name>
            <quantity>0.04</quantity>
            <disposition>Break out overall</disposition>
            <isstream>true</isstream>
            <stream>
                <name>Black Pepper</name>
                <quantity>0.02</quantity>
                <disposition>Break out overall</disposition>
            </stream>
            <stream>
                <name>Garlic</name>
                <quantity>0.02</quantity>
                <disposition>Break out overall</disposition>
            </stream>
            <stream>
                <name>Red Pepper</name>
                <quantity>0.02</quantity>
                <disposition>Break out overall</disposition>
            </stream>
        </stream>
    </stream>
</root>

算法后的预期结果:

<root>
    <stream>
        <name>Corn Oil</name>
        <quantity>0.3</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Potatoes</name>
        <quantity>0.5</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Seasoning</name>
        <quantity>0.1</quantity>
        <disposition>Break out overall</disposition>
        <isstream>true</isstream>
    </stream>
    <stream>
        <name>Salt</name>
        <quantity>0.02</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Maltodextrin</name>
        <quantity>0.03</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Spice Blend</name>
        <quantity>0.04</quantity>
        <disposition>Break out overall</disposition>
        <isstream>true</isstream>
    </stream>
    <stream>
        <name>Black Pepper</name>
        <quantity>0.02</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Garlic</name>
        <quantity>0.02</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Red Pepper</name>
        <quantity>0.02</quantity>
        <disposition>Break out overall</disposition>
    </stream>
</root>

实际结果:

<root>
    <stream>
        <name>Corn Oil</name>
        <quantity>0.3</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Potatoes</name>
        <quantity>0.5</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Seasoning</name>
        <quantity>0.1</quantity>
        <disposition>Break out overall</disposition>
        <isstream>true</isstream>
        <stream>
            <name>Salt</name>
            <quantity>0.02</quantity>
            <disposition>Break out overall</disposition>
        </stream>
        <stream>
            <name>Maltodextrin</name>
            <quantity>0.03</quantity>
            <disposition>Break out overall</disposition>
        </stream>
        <stream>
            <name>Spice Blend</name>
            <quantity>0.04</quantity>
            <disposition>Break out overall</disposition>
            <isstream>true</isstream>
            <stream>
                <name>Black Pepper</name>
                <quantity>0.02</quantity>
                <disposition>Break out overall</disposition>
            </stream>
            <stream>
                <name>Garlic</name>
                <quantity>0.02</quantity>
                <disposition>Break out overall</disposition>
            </stream>
            <stream>
                <name>Red Pepper</name>
                <quantity>0.02</quantity>
                <disposition>Break out overall</disposition>
            </stream>
        </stream>
    </stream>
    <stream>
        <name>Salt</name>
        <quantity>0.02</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Maltodextrin</name>
        <quantity>0.03</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Spice Blend</name>
        <quantity>0.04</quantity>
        <disposition>Break out overall</disposition>
        <isstream>true</isstream>
        <stream>
            <name>Black Pepper</name>
            <quantity>0.02</quantity>
            <disposition>Break out overall</disposition>
        </stream>
        <stream>
            <name>Garlic</name>
            <quantity>0.02</quantity>
            <disposition>Break out overall</disposition>
        </stream>
        <stream>
            <name>Red Pepper</name>
            <quantity>0.02</quantity>
            <disposition>Break out overall</disposition>
        </stream>
    </stream>
    <stream>
        <name>Black Pepper</name>
        <quantity>0.02</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Garlic</name>
        <quantity>0.02</quantity>
        <disposition>Break out overall</disposition>
    </stream>
    <stream>
        <name>Red Pepper</name>
        <quantity>0.02</quantity>
        <disposition>Break out overall</disposition>
    </stream>
</root>

下面和 JsFiddle 处的算法完全按照顶级流、 Jade 米油、土 bean 和调味料的预期工作，尽职地删除每个 <stream>...</stream>下的节点 <root>...</root>节点并将其附加回 <root>...</root> 下节点。但是，对于所有其他嵌套 <stream>...</stream>配方中的节点(香料混合物、麦芽糖糊精、盐、红辣椒、大蒜、黑胡椒)，$(this).remove()算法的一部分不起作用，即这些流被复制到 <root>...</root>节点但原节点没有被删除。

var xmlAsStr = "<root><stream><name>Corn Oil</name><quantity>0.3</quantity><disposition>Break out overall</disposition></stream><stream><name>Potatoes</name><quantity>0.5</quantity><disposition>Break out overall</disposition></stream><stream><name>Seasoning</name><quantity>0.1</quantity><disposition>Break out overall</disposition><isstream>true</isstream><stream><name>Salt</name><quantity>0.02</quantity><disposition>Break out overall</disposition></stream><stream><name>Maltodextrin</name><quantity>0.03</quantity><disposition>Break out overall</disposition></stream><stream><name>Spice Blend</name><quantity>0.04</quantity><disposition>Break out overall</disposition><isstream>true</isstream><stream><name>Black Pepper</name><quantity>0.02</quantity><disposition>Break out overall</disposition></stream><stream><name>Garlic</name><quantity>0.02</quantity><disposition>Break out overall</disposition></stream><stream><name>Red Pepper</name><quantity>0.02</quantity><disposition>Break out overall</disposition></stream></stream></stream></root>";
    var xmlDoc = $.parseXML( xmlAsStr );
    var $xml = $( xmlDoc );
    
  $('stream',$xml).each(function(){
      if($(this).children('disposition').text()=="Break out overall" )
    {
       var thisHtml = $(this).html();
      $(this).remove();
      $xml.find('root').append('<stream>'+thisHtml+'</stream>');
    }
  });

除了 $(this).remove();我努力了: $xml.find('root').find(this).remove(); $xml.find(this).remove(); $(this,$xml).remove();但似乎没有任何方法可以从 XML 树中删除这些嵌套节点。任何有关如何完成上述 XML 操作的帮助或见解将不胜感激。谢谢。

Answer 1

自下而上的递归算法成功地按预期展平了 XML 树。我最初的错误是试图依靠 jQuery 隐式迭代和单独遍历来解决这个问题，而没有显式递归。下面是已解决的代码以及有效的 jsFiddle 供您引用。 。抱歉打扰您了，已经解决了。太感谢了。

$(function(){
    var xmlAsStr = "<root><stream><name>Corn Oil</name><quantity>0.3</quantity><disposition>Break out overall</disposition></stream><stream><name>Potatoes</name><quantity>0.5</quantity><disposition>Break out overall</disposition></stream><stream><name>Seasoning</name><quantity>0.1</quantity><disposition>Break out overall</disposition><isstream>true</isstream><stream><name>Salt</name><quantity>0.02</quantity><disposition>Break out overall</disposition></stream><stream><name>Maltodextrin</name><quantity>0.03</quantity><disposition>Break out overall</disposition></stream><stream><name>Spice Blend</name><quantity>0.04</quantity><disposition>Break out overall</disposition><isstream>true</isstream><stream><name>Black Pepper</name><quantity>0.02</quantity><disposition>Break out overall</disposition></stream><stream><name>Garlic</name><quantity>0.02</quantity><disposition>Break out overall</disposition></stream><stream><name>Red Pepper</name><quantity>0.02</quantity><disposition>Break out overall</disposition></stream></stream></stream></root>"; 
            var xmlDoc = $.parseXML( xmlAsStr );
            var $xml = $( xmlDoc ); 
            var $myResultingXml; 

            var streamNodeArray = []; 

            $('root',$xml).children('stream').each(function(){       
                streamNodeArray.push($(this)); 
            });

            var i = 0; 
            for(i=0;i<streamNodeArray.length;i++)
            {
                $myResultingXml = flattenXmlRecursive(streamNodeArray[i],$xml); 
            }

  var resultingXmlString = '<root>'+$myResultingXml.find("root").html()+'</root>'
  console.log(resultingXmlString );
});

function flattenXmlRecursive(xmlFragment,xmlDoc)
{
    var i = 0; 
    var streamNodeArray = []; 
    xmlFragment.children('stream').each(function(){
        streamNodeArray.push($(this)); 
    });

    for(i=0;i<streamNodeArray.length;i++)
    {
        flattenXmlRecursive(streamNodeArray[i],xmlDoc); 
    }

    if(xmlFragment.children('disposition').text()=='Break out overall')
    {
        xmlDoc.find(xmlFragment).remove(); 
        xmlDoc.find('root').append(xmlFragment); 
    }

    return xmlDoc; 
}