2017-10-12 50 views
0

我想下面的XML內容解析成csv格式:讀取XML文件轉換成CSV格式

<order> 
    <item>abc</item> 
    <item>123</item> 
    <item/> 
    <item>000</item> 
</order> 
<order> 
    <item>999</item> 
    <item>333</item> 
</order> 

我能夠讀取使用FileApi XML文件。變量text包含xml內容。您能否提供一些關於如何將每個<order>標籤解析到數組中的見解?

<!doctype html> 
 
<html> 
 
<head> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
     $(function() { 
 
      $("#fileUpload").change(function() { 
 
       for (var i = 0; i < this.files.length; i++) { 
 

 
        var reader = new FileReader(); 
 
        reader.onload = function(e) { 
 
         var text = reader.result; 
 
        } 
 
        reader.readAsText(this.files[i]); 
 

 
        //TODO 
 
        //1. find tag <order> 
 
        //2. get all <item> text into an array 
 
        //3. separate array elements with a semicolon 
 
        //4. show array content in the div dataContainer + <br> 
 
        //5. repeat until there is no more <order> tags to parse 
 

 
       } 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <input type="file" id="fileUpload" multiple="multiple" /> 
 
    <div id="dataContainer"></div> 
 
</body> 
 
</html>

這是要顯示在div dataContainer預期輸出:

abc;123;;000 
999;333 

回答

0

您可以使用.find()得到<order>元素,.each()迭代<item>元素,串連每一個元素

let xml = `<?xml version="1.0" encoding="UTF-8"?> 
 
<root> 
 
    <order> 
 
    <item>abc</item> 
 
    <item>123</item> 
 
    <item/> 
 
    <item>000</item> 
 
    </order> 
 
    <order> 
 
    <item>999</item> 
 
    <item>333</item> 
 
    </order> 
 
</root>`; 
 

 
let str = ""; 
 

 
$(xml) 
 
    .find("order") 
 
    .each(function() { 
 
    let item = $(this).find("item"); 
 
    item.each(function(i, el) { 
 
     str += el.textContent + (i < item.length - 1 ? ";" : ""); 
 
    }); 
 
    str += "\n"; 
 
    }); 
 

 
console.log(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script>

.textContent
0

爲什麼不將數據只存儲在一個Document和迭代的方式你會與任何其他的DOM?你想要做的是什麼樣的樣子MDN's example of doing exactly that

var sMyString = '<a id="a"><b id="b">hey!</b></a>'; 
var oParser = new DOMParser(); 
var oDOM = oParser.parseFromString(sMyString, "text/xml"); 

orders = oDOM.getElementsByTagName("order"); 
for (i = 0; i < orders.length(); i++) { 
    // Do stuff 
} 

或者如果你感覺有點更勇敢,你可以使用與奧多姆對象XPath引用。