CSV to XML using javascript

Question

i am new in javascript i need to convert csv string data into xml look like below

CSV data:

   product,pakageing,qty
   mno,100ML,200
   pqr,400ML,300
   abc,150ML,100

XML should be as below:

 <productData>
   <product>mno</product>
   <pakageing>100ML</pakageing
   <qty>200</qty>
 </productData>
 <productData>
   <product>pqr</product>
   <pakageing>400ML</pakageing
   <qty>300</qty>
 </productData>
 <productData>
   <product>abc</product>
   <pakageing>150ML</pakageing
   <qty>100</qty>
 </productData>

first you need to convert it into object and then convert it into xml — zabusa
– zabusa, Commented Dec 22, 2017 at 10:57

mehulmpt · Accepted Answer · 2017-12-22 11:13:49Z

3

Try this.

Split the CSV data by new line, get the heading tags from the first line and iterate over the rest of the data and keep putting the data into the XML string through a loop.

let csvData = `product,pakageing,qty
   mno,100ML,200
   pqr,400ML,300
   abc,150ML,100`;

csvData = csvData.split('\n').map(row => row.trim())

let headings = csvData[0].split(',')

let xml = ``

for(let i = 1; i < csvData.length; i++) {
  let details = csvData[i].split(',')
  xml += "<productData>\n"
  for(let j = 0; j < headings.length; j++) {
    xml += `<${headings[j]}>${details[j]}</${headings[j]}>
    `;
  }
  xml += "</productData>\n"
}

console.log(xml);

edited Dec 22, 2017 at 11:13

answered Dec 22, 2017 at 10:59

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Hund Over a year ago

Please add some explanation on what the code does, and how. Simply pasting code as an answer may help the OP, but does not provide much help for other users with similar problems

Sourabh Somani · Accepted Answer · 2017-12-22 11:34:42Z

Try this

Common Function

function convertToXML(csvData) {
    var dataArr = csvData.split("\n");
    var heading = dataArr[0].split(",");
    var data = dataArr.splice(1, dataArr.length - 1);
    var xmlData = document.createElement("XmlData");
    for (var i = 0; i < data.length; i++) {
        var d = data[i].split(",");
        var productData = document.createElement("productData");
        for (var j = 0; j < d.length; j++) {
            var tag = document.createElement(heading[j]);
            tag.innerHTML = d[j];
            productData.appendChild(tag)
        }
        xmlData.appendChild(productData);
    }
    return xmlData.innerHTML;
}

Example:

//Adding default data to textbox
$("#tbCSV").val("product,pakageing,qty\n\
mno,100ML,200\n\
pqr,400ML,300\n\
abc,150ML,100");

//Binding Click Method
$("#btnConvert").click(function(){
  var xmlData=convertToXML($("#tbCSV").val());
  $("#tbXML").html(xmlData);
});

//Function which is used to convert CSV data to XML
function convertToXML(csvData){
  var dataArr=csvData.split("\n");
var heading=dataArr[0].split(",");
var data=dataArr.splice(1,dataArr.length-1);
var xmlData=document.createElement("XmlData");
for(var i=0;i<data.length;i++){
  var d=data[i].split(",");
  var productData=document.createElement("productData");
  for(var j=0;j<d.length;j++){
    var tag=document.createElement(heading[j]);
    tag.innerHTML=d[j];
    productData.appendChild(tag)
  }
  xmlData.appendChild(productData);
}
  return xmlData.innerHTML;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="" id="tbCSV" cols="35" rows="5"></textarea>
<textarea name="" id="tbXML" cols="35" rows="5"></textarea>
<br/>
<button id="btnConvert">Convert To XML</button>

Here is the link https://codepen.io/anon/pen/QaKxKK

Collectives™ on Stack Overflow

CSV to XML using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related