Geek Answers Handbook

Convert XML to CSV using Javascript

I was looking for some help trying to convert the XML extracted from the Amazon product API to convert it to the CSV (Comma Separated Value) format.

I found a similar topic here: XML to CSV conversion problem , but it uses PHP, and I want to use javascript instead.

Here is an example of what I have:

<?xml version="1.0" encoding="UTF-8"?> <ItemLookupResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2011-08-01"> <OperationRequest> <RequestId>1k75f474-85ff-464a-al93-659ol460caee</RequestId> <Arguments> <Argument Name="Operation" Value="ItemLookup" /> <Argument Name="Service" Value="AWSECommerceService" /> <Argument Name="Signature" Value="lImNXr6R4c2t376ghMnMmjUPR4eY6755XzH41pXGH0P=" /> <Argument Name="AssociateTag" Value="oiuig-20" /> <Argument Name="ItemId" Value="B007EHI1DK" /> <Argument Name="AWSAccessKeyId" Value="DIY7F4M00OF6I7TRD3VA" /> <Argument Name="Timestamp" Value="2013-01-04T05:23:20Z" /> <Argument Name="ResponseGroup" Value="Large" /> </Arguments> <RequestProcessingTime>0.0359500000000000</RequestProcessingTime> </OperationRequest> <Items> <Request> <IsValid>True</IsValid> <ItemLookupRequest> <IdType>ASIN</IdType> <ItemId>B007EHI1DK</ItemId> <ResponseGroup>Large</ResponseGroup> <VariationPage>All</VariationPage> </ItemLookupRequest> </Request> <Item> <ASIN>B007EHI1DK</ASIN> <DetailPageURL>http://www.amazon.com/Panasonic-TY-ER3D4MU-Active-Shutter-Eyewear/dp/B007EHI1DK%3FSubscriptionId%3DIY7F4M00OF6I7TRD3VAS%26tag%3Daztag-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB007EHI1DK</DetailPageURL> <ItemLinks> <ItemLink> <Description>Technical Details</Description> <URL>http://www.amazon.com/Panasonic-TY-ER3D4MU-Active-Shutter-Eyewear/dp/tech-data/B007EHI1DK%3FSubscriptionId%3DIY7F4M00OF6I7TRD3VAS%26tag%3Daztag-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3DB007EHI1DK</URL> </ItemLink> <ItemLink> <Description>Add To Baby Registry</Description> <URL>http://www.amazon.com/gp/registry/baby/add-item.html%3Fasin.0%3DB007EHI1DK%26SubscriptionId%3DIY7F4M00OF6I7TRD3VAS%26tag%3Daztag-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3DB007EHI1DK</URL> </ItemLink> <ItemLink> <Description>Add To Wedding Registry</Description> <URL>http://www.amazon.com/gp/registry/wedding/add-item.html%3Fasin.0%3DB007EHI1DK%26SubscriptionId%3DIY7F4M00OF6I7TRD3VAS%26tag%3Daztag-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3DB007EHI1DK</URL> </ItemLink> <ItemLink> <Description>Add To Wishlist</Description> <URL>http://www.amazon.com/gp/registry/wishlist/add-item.html%3Fasin.0%3DB007EHI1DK%26SubscriptionId%3DIY7F4M00OF6I7TRD3VAS%26tag%3Daztag-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3DB007EHI1DK</URL> </ItemLink> <ItemLink> <Description>Tell A Friend</Description> <URL>http://www.amazon.com/gp/pdp/taf/B007EHI1DK%3FSubscriptionId%3DIY7F4M00OF6I7TRD3VAS%26tag%3Daztag-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3DB007EHI1DK</URL> </ItemLink> <ItemLink> <Description>All Customer Reviews</Description> <URL>http://www.amazon.com/review/product/B007EHI1DK%3FSubscriptionId%3DIY7F4M00OF6I7TRD3VAS%26tag%3Daztag-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3DB007EHI1DK</URL> </ItemLink> <ItemLink> <Description>All Offers</Description> <URL>http://www.amazon.com/gp/offer-listing/B007EHI1DK%3FSubscriptionId%3DIY7F4M00OF6I7TRD3VAS%26tag%3Daztag-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3DB007EHI1DK</URL> </ItemLink> </ItemLinks> <SmallImage> <URL>http://ecx.images-amazon.com/images/I/31pKDguukTL._SL75_.jpg</URL> <Height Units="pixels">50</Height> <Width Units="pixels">75</Width> </SmallImage> <MediumImage> <URL>http://ecx.images-amazon.com/images/I/31pKDguukTL._SL160_.jpg</URL> <Height Units="pixels">107</Height> <Width Units="pixels">160</Width> </MediumImage> <LargeImage> <URL>http://ecx.images-amazon.com/images/I/31pKDguukTL.jpg</URL> <Height Units="pixels">333</Height> <Width Units="pixels">500</Width> </LargeImage> <ImageSets> <ImageSet Category="primary"> <SwatchImage> <URL>http://ecx.images-amazon.com/images/I/31pKDguukTL._SL30_.jpg</URL> <Height Units="pixels">20</Height> <Width Units="pixels">30</Width> </SwatchImage> <SmallImage> <URL>http://ecx.images-amazon.com/images/I/31pKDguukTL._SL75_.jpg</URL> <Height Units="pixels">50</Height> <Width Units="pixels">75</Width> </SmallImage> <ThumbnailImage> <URL>http://ecx.images-amazon.com/images/I/31pKDguukTL._SL75_.jpg</URL> <Height Units="pixels">50</Height> <Width Units="pixels">75</Width> </ThumbnailImage> <TinyImage> <URL>http://ecx.images-amazon.com/images/I/31pKDguukTL._SL110_.jpg</URL> <Height Units="pixels">73</Height> <Width Units="pixels">110</Width> </TinyImage> <MediumImage> <URL>http://ecx.images-amazon.com/images/I/31pKDguukTL._SL160_.jpg</URL> <Height Units="pixels">107</Height> <Width Units="pixels">160</Width> </MediumImage> <LargeImage> <URL>http://ecx.images-amazon.com/images/I/31pKDguukTL.jpg</URL> <Height Units="pixels">333</Height> <Width Units="pixels">500</Width> </LargeImage> </ImageSet> <ImageSet Category="variant"> <SwatchImage> <URL>http://ecx.images-amazon.com/images/I/31dSwH5PnjL._SL30_.jpg</URL> <Height Units="pixels">20</Height> <Width Units="pixels">30</Width> </SwatchImage> <SmallImage> <URL>http://ecx.images-amazon.com/images/I/31dSwH5PnjL._SL75_.jpg</URL> <Height Units="pixels">50</Height> <Width Units="pixels">75</Width> </SmallImage> <ThumbnailImage> <URL>http://ecx.images-amazon.com/images/I/31dSwH5PnjL._SL75_.jpg</URL> <Height Units="pixels">50</Height> <Width Units="pixels">75</Width> </ThumbnailImage> <TinyImage> <URL>http://ecx.images-amazon.com/images/I/31dSwH5PnjL._SL110_.jpg</URL> <Height Units="pixels">73</Height> <Width Units="pixels">110</Width> </TinyImage> <MediumImage> <URL>http://ecx.images-amazon.com/images/I/31dSwH5PnjL._SL160_.jpg</URL> <Height Units="pixels">107</Height> <Width Units="pixels">160</Width> </MediumImage> <LargeImage> <URL>http://ecx.images-amazon.com/images/I/31dSwH5PnjL.jpg</URL> <Height Units="pixels">333</Height> <Width Units="pixels">500</Width> </LargeImage> </ImageSet> <ImageSet Category="variant"> <SwatchImage> <URL>http://ecx.images-amazon.com/images/I/31irEbzxdgL._SL30_.jpg</URL> <Height Units="pixels">20</Height> <Width Units="pixels">30</Width> </SwatchImage> <SmallImage> <URL>http://ecx.images-amazon.com/images/I/31irEbzxdgL._SL75_.jpg</URL> <Height Units="pixels">50</Height> <Width Units="pixels">75</Width> </SmallImage> <ThumbnailImage> <URL>http://ecx.images-amazon.com/images/I/31irEbzxdgL._SL75_.jpg</URL> <Height Units="pixels">50</Height> <Width Units="pixels">75</Width> </ThumbnailImage> <TinyImage> <URL>http://ecx.images-amazon.com/images/I/31irEbzxdgL._SL110_.jpg</URL> <Height Units="pixels">73</Height> <Width Units="pixels">110</Width> </TinyImage> <MediumImage> <URL>http://ecx.images-amazon.com/images/I/31irEbzxdgL._SL160_.jpg</URL> <Height Units="pixels">107</Height> <Width Units="pixels">160</Width> </MediumImage> <LargeImage> <URL>http://ecx.images-amazon.com/images/I/31irEbzxdgL.jpg</URL> <Height Units="pixels">333</Height> <Width Units="pixels">500</Width> </LargeImage> </ImageSet> </ImageSets> <ItemAttributes> <Binding>Electronics</Binding> <Brand>Panasonic</Brand> <CatalogNumberList> <CatalogNumberListElement>TYER3D4M</CatalogNumberListElement> <CatalogNumberListElement>TYER3D4MU</CatalogNumberListElement> <CatalogNumberListElement>TY-ER3D4MU</CatalogNumberListElement> </CatalogNumberList> <Color>One Color</Color> <Department>Electronics</Department> <EAN>0885170075207</EAN> <EANList> <EANListElement>0885170075207</EANListElement> </EANList> <Feature>Lightweight Active Shutter 3D Eyewear</Feature> <Feature>USB Rechargeable</Feature> <Feature>RF Compatible</Feature> <IsAutographed>0</IsAutographed> <IsMemorabilia>0</IsMemorabilia> <ItemDimensions> <Height Units="hundredths-inches">170</Height> <Length Units="hundredths-inches">340</Length> <Weight Units="hundredths-pounds">10</Weight> <Width Units="hundredths-inches">670</Width> </ItemDimensions> <Label>Panasonic</Label> <ListPrice> <Amount>7995</Amount> <CurrencyCode>USD</CurrencyCode> <FormattedPrice>$79.95</FormattedPrice> </ListPrice> <Manufacturer>Panasonic</Manufacturer> <Model>TY-ER3D4MU</Model> <MPN>TY-ER3D4MU</MPN> <NumberOfItems>1</NumberOfItems> <PackageDimensions> <Height Units="hundredths-inches">240</Height> <Length Units="hundredths-inches">690</Length> <Weight Units="hundredths-pounds">30</Weight> <Width Units="hundredths-inches">350</Width> </PackageDimensions> <PackageQuantity>1</PackageQuantity> <PartNumber>TY-ER3D4MU</PartNumber> <ProductGroup>CE</ProductGroup> <ProductTypeName>CONSUMER_ELECTRONICS</ProductTypeName> <Publisher>Panasonic</Publisher> <Size>One Size</Size> <SKU>292782</SKU> <Studio>Panasonic</Studio> <Title>Panasonic VIERA TY-ER3D4MU Active Shutter 3D Eyewear</Title> <UPC>885170075207</UPC> <UPCList> <UPCListElement>885170075207</UPCListElement> </UPCList> </ItemAttributes> <OfferSummary> <LowestNewPrice> <Amount>5400</Amount> <CurrencyCode>USD</CurrencyCode> <FormattedPrice>$54.00</FormattedPrice> </LowestNewPrice> <LowestUsedPrice> <Amount>4294</Amount> <CurrencyCode>USD</CurrencyCode> <FormattedPrice>$42.94</FormattedPrice> </LowestUsedPrice> <TotalNew>24</TotalNew> <TotalUsed>18</TotalUsed> <TotalCollectible>0</TotalCollectible> <TotalRefurbished>0</TotalRefurbished> </OfferSummary> <Offers> <TotalOffers>1</TotalOffers> <TotalOfferPages>1</TotalOfferPages> <MoreOffersUrl>http://www.amazon.com/gp/offer-listing/B007EHI1DK%3FSubscriptionId%3DIY7F4M00OF6I7TRD3VAS%26tag%3Daztag-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3DB007EHI1DK</MoreOffersUrl> <Offer> <OfferAttributes> <Condition>New</Condition> </OfferAttributes> <OfferListing> <OfferListingId>rkyW%2Bed7Qb8t28tJRRHkKizuk2CxNF4SI6W9XAnbXI8JX%2FJNpUY%2B8zqnnNRe3Vt2l%2B8rUMqypquQnAE66PYmf32dJeor6DifXvXKscwOqyrLwgFZORqmDg%3D%3D</OfferListingId> <Price> <Amount>5851</Amount> <CurrencyCode>USD</CurrencyCode> <FormattedPrice>$58.51</FormattedPrice> </Price> <AmountSaved> <Amount>2144</Amount> <CurrencyCode>USD</CurrencyCode> <FormattedPrice>$21.44</FormattedPrice> </AmountSaved> <PercentageSaved>27</PercentageSaved> <Availability>Usually ships in 24 hours</Availability> <AvailabilityAttributes> <AvailabilityType>now</AvailabilityType> <MinimumHours>0</MinimumHours> <MaximumHours>0</MaximumHours> </AvailabilityAttributes> <IsEligibleForSuperSaverShipping>1</IsEligibleForSuperSaverShipping> </OfferListing> </Offer> </Offers> <CustomerReviews> <IFrameURL>http://www.amazon.com/reviews/iframe?akid=AKIAIBT3ANF6TOEOKXVA&amp;alinkCode=xm2&amp;asin=B007EHI1DK&amp;atag=aztag-20&amp;exp=2013-01-05T05%3A23%3A21Z&amp;v=2&amp;sig=yz1U1nT8mWjFGauK3umnsOqp9BTzWwGOAAiLCyZ%2BEPM%3D</IFrameURL> <HasReviews>true</HasReviews> </CustomerReviews> <EditorialReviews> <EditorialReview> <Source>Product Description</Source> <Content>&lt;strong&gt;3D Playback Type:&lt;/strong&gt; Active Shutter 3D Method&lt;br /&gt;&lt;strong&gt;Transmittance Method:&lt;/strong&gt; RF (Bluetooth)/ Full HD 3D Glasses Standard Compatible&lt;br /&gt;&lt;strong&gt;Battery Type: &lt;/strong&gt;Lithium-ion Polymer Rechargeable Battery&lt;br /&gt;&lt;strong&gt;Battery Duration:&lt;/strong&gt; Approximately 30 hours of operation for a 30-minute full battery charge (Approximately 3 hours of operation for a 2-minute battery charge)&lt;em&gt; *The battery duration will change as per the total usage time with the number of charge/discharge cycles &lt;/em&gt;&lt;br /&gt;&lt;strong&gt;Package Included:&lt;/strong&gt; 1 Pair of Eyewear &lt;br /&gt;Note: These glasses are only compatible with 2012 VIERA HDTVs&lt;br /&gt;&lt;br /&gt; &lt;div style="text-align: left;"&gt;&lt;strong&gt;Accessory Compatibility Chart&lt;br /&gt;&lt;/strong&gt;&lt;/div&gt; &lt;img height="375" src="http://g-ecx.images-amazon.com/images/G/01/electronics/Cat500/Panasonic/2012/accessory_compatibility_2._V138249826_.gif" width="650" /&gt;&lt;br /&gt;&lt;br /&gt;</Content> <IsLinkSuppressed>0</IsLinkSuppressed> </EditorialReview> </EditorialReviews> <SimilarProducts> <SimilarProduct> <ASIN>B007K9P7H0</ASIN> <Title>Samsung SSG-4100GB 3D Active Glasses 2012 Models - Black</Title> </SimilarProduct> <SimilarProduct> <ASIN>B00752VKSC</ASIN> <Title>Panasonic VIERA TC-P55ST50 55-Inch 1080p 600Hz Full HD 3D Plasma TV</Title> </SimilarProduct> <SimilarProduct> <ASIN>B00752R4PK</ASIN> <Title>Panasonic DMP-BDT220 Integrated Wi-Fi 3D Blu-ray DVD Player</Title> </SimilarProduct> <SimilarProduct> <ASIN>B00752VKFA</ASIN> <Title>Panasonic VIERA TC-P55GT50 55-Inch 1080p 600Hz Full HD 3D Plasma TV</Title> </SimilarProduct> <SimilarProduct> <ASIN>B00752VL8G</ASIN> <Title>Panasonic VIERA TC-P60GT50 60-Inch 1080p 600Hz Full HD 3D Plasma TV</Title> </SimilarProduct> </SimilarProducts> <BrowseNodes> <BrowseNode> <BrowseNodeId>3224438011</BrowseNodeId> <Name>3D Glasses</Name> <Ancestors> <BrowseNode> <BrowseNodeId>172532</BrowseNodeId> <Name>Audio &amp; Video Accessories</Name> <Ancestors> <BrowseNode> <BrowseNodeId>281407</BrowseNodeId> <Name>Accessories &amp; Supplies</Name> <Ancestors> <BrowseNode> <BrowseNodeId>493964</BrowseNodeId> <Name>Categories</Name> <IsCategoryRoot>1</IsCategoryRoot> <Ancestors> <BrowseNode> <BrowseNodeId>172282</BrowseNodeId> <Name>Electronics</Name> </BrowseNode> </Ancestors> </BrowseNode> </Ancestors> </BrowseNode> </Ancestors> </BrowseNode> </Ancestors> </BrowseNode> <BrowseNode> <BrowseNodeId>1288264011</BrowseNodeId> <Name>All product</Name> <Ancestors> <BrowseNode> <BrowseNodeId>1267878011</BrowseNodeId> <Name>Products</Name> <IsCategoryRoot>1</IsCategoryRoot> <Ancestors> <BrowseNode> <BrowseNodeId>1267877011</BrowseNodeId> </BrowseNode> </Ancestors> </BrowseNode> </Ancestors> </BrowseNode> <BrowseNode> <BrowseNodeId>3545110011</BrowseNodeId> <Name>Home Entertainment</Name> <Children> <BrowseNode> <BrowseNodeId>3547652011</BrowseNodeId> <Name>Blu-Ray Players</Name> </BrowseNode> <BrowseNode> <BrowseNodeId>3547650011</BrowseNodeId> <Name>DVD Players</Name> </BrowseNode> <BrowseNode> <BrowseNodeId>6183878011</BrowseNodeId> <Name>Home Theater Projectors</Name> </BrowseNode> <BrowseNode> <BrowseNodeId>1294446011</BrowseNodeId> <Name>Televisions</Name> </BrowseNode> <BrowseNode> <BrowseNodeId>6183893011</BrowseNodeId> <Name>Television Tuners and Receivers</Name> </BrowseNode> </Children> <Ancestors> <BrowseNode> <BrowseNodeId>1294447011</BrowseNodeId> <Name>Electronics</Name> <Ancestors> <BrowseNode> <BrowseNodeId>1267878011</BrowseNodeId> <Name>Products</Name> <IsCategoryRoot>1</IsCategoryRoot> <Ancestors> <BrowseNode> <BrowseNodeId>1267877011</BrowseNodeId> </BrowseNode> </Ancestors> </BrowseNode> </Ancestors> </BrowseNode> </Ancestors> </BrowseNode> <BrowseNode> <BrowseNodeId>1293319011</BrowseNodeId> <Name>Electronics</Name> <Ancestors> <BrowseNode> <BrowseNodeId>1267879011</BrowseNodeId> <Name>Special Features</Name> <Ancestors> <BrowseNode> <BrowseNodeId>1267877011</BrowseNodeId> </BrowseNode> </Ancestors> </BrowseNode> </Ancestors> </BrowseNode> </BrowseNodes> </Item> </Items> </ItemLookupResponse>

I am trying to format this data in a CSV formatted table using Javascript.

Can anybody help?

Thanks in advance! Praney

+7
source share
2 answers

After a long investigation, I found out something that might help you.

Starting from the moment when reinventing the wheel is such a stupid and time-consuming task, I searched for what other good programmers have already built there on the Internet.

Unfortunately, I could not find the form of a direct XML to CSV converter as an example that you provide in PHP.

In my working example, XML should first go from JSON like this:

  • xml2json => json2csv

I took some snippets here and there, and I will add links to where I actually took the whole piece of code that I use to create a demo at the end of this answer. Thus, you can get beautiful and clean documentation that will help you improve this tool.

Here is a simple demo:

 function xmlTocsv() { var data = $("#xmlArea").val(); var xml = ""; if (data !== null && data.trim().length !== 0) { try { xml = $.parseXML(data); } catch (e) { throw e; } var x2js = new X2JS(); data = x2js.xml2json(xml); jsonTocsvbyjson(data); } } function jsonTocsvbyjson(data, returnFlag) { arr = []; flag = true; var header = ""; var content = ""; var headFlag = true; try { var type1 = typeof data; if (type1 != "object") { data = processJSON($.parseJSON(data)); } else { data = processJSON(data); } } catch (e) { if (returnFlag === undefined || !returnFlag) { console.error("Error in Convert to CSV"); } else { console.error("Error in Convert :" + e); } return false; } $.each(data, function(k, value) { if (k % 2 === 0) { if (headFlag) { if (value != "end") { header += value + ","; } else { // remove last colon from string header = header.substring(0, header.length - 1); headFlag = false; } } } else { if (value != "end") { var temp = data[k - 1]; if (header.search(temp) != -1) { content += value + ","; } } else { // remove last colon from string content = content.substring(0, content.length - 1); content += "\n"; } } }); if (returnFlag === undefined || !returnFlag) { $("#csvArea").val(header + "\n" + content); } else { return (header + "\n" + content); } } function processJSON(data) { $.each(data, function(k, data1) { var type1 = typeof data1; if (type1 == "object") { flag = false; processJSON(data1); arr.push("end"); arr.push("end"); } else { arr.push(k, data1); } }); return arr; } 
 <!DOCTYPE html> <html> <head> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> <script type='text/javascript' src="https://cdn.rawgit.com/abdmob/x2js/master/xml2json.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h1>XML2CSV Demo</h1> <button id="convertToXmlBtn" onclick="xmlTocsv()">XML => CSV</button> <div> <h4>XML:</h4> <textarea id="xmlArea" cols="55" rows="15"></textarea> </div> <div> <h4>CSV:</h4> <textarea id="csvArea" cols="55" rows="15"></textarea> </div> </body> </html>

Literature:

Utils:

+5
source

Try using jQuery and it would be easier - Link: Simple XML-HTML table

+1
source

More articles:


All Articles