How to create a Javascript array from xml file attributes in jQuery

Question

I am using jqGrid, but it cannot take attributes from a xml file. So I wanted to have a array out the xml something like below. Please help me create an array from the xml file below

jqGrid supported array format

var mydata = [
    {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ];

My xml

<?xml-stylesheet type="text/xsl" href="csmclientiir.xsl"?>
<csmclient product="abc"   date="4/26/11 2:05 PM">
<system>
<osname>Linux
</osname>
<hostname>AbhishekNix
</hostname>
<release>2.6.18-128.el5
</release>
<filesystem>
    <file mount='/home/hp1' home='(innfs2:/vol/home/shome/home/hp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
    <file mount='/home/par21' home='(innfs2:/vol/home/shome/home/par21)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
    <file mount='/home/h231' home='(innfs2:/vol/home/shome/home/h231)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
    <file mount='/home/avallin1' home='(innfs2:/vol/home/shome/home/avallin1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
    <file mount='/home/park' home='(innfs2:/vol/home/shome/home/park)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
    <file mount='/home/sp1' home='(innfs2:/vol/home/shome/home/sp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
    <file mount='/home/ganga1' home='(innfs2:/vol/home/shome/home/ganga1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
    <file mount='/home/nbp1' home='(innfs2:/vol/home/shome/home/nbp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
</filesystem>
</system>
<product>
<showtime>Tue Apr 26 14:05:23 2011
</showtime>
</product>
</csmclient>

How to create a JS array in jquery or JS, out of the above xml for the attributes under csmclient>system>filesystem>file eg: mount, free, total, used and percentage attributes

Updated

var filesystem=[];
$(xml).find('file').each(function(){ 
    console.info($(this).attr('total')+", "+$(this).attr('free')+", "+$(this).attr('used')+", "+$(this).attr('percentage'));
    var row={};
    row.total=$(this).attr('total');
    row.free=$(this).attr('free');
    row.used=$(this).attr('used');
    row.percentage=$(this).attr('percentage');
    filesystem.push(row);
});

Answer 1

use a jQuery XSLT plugin to transform the xml to the proper format.

XML --> [XSLT Transformation] --> JS

This layer between the source (XML) and the output (JS) gives you the freedom to maintain, change and expand the source and the output without creating spaghetti.

An XSLT to JSON tutorial can be found here

---

EDIT: A sample implementation would look like

<xsl:stylesheet 
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
  <xsl:output method="text" />

  <xsl:template match="/">
    <xsl:apply-templates select="csmclient/system/filesystem" />
  </xsl:template>

  <xsl:template match="filesystem">
    <xsl:text>[</xsl:text>
    <xsl:apply-templates select="file" />
    <xsl:text>]</xsl:text>
  </xsl:template>

  <xsl:template match="file">
    <xsl:text>{</xsl:text>
    <xsl:apply-templates select="@*" />
    <xsl:text>}</xsl:text>
    <xsl:if test="position() &lt; last()">,</xsl:if>
  </xsl:template>

  <xsl:template match="file/@*">
    <xsl:value-of select="concat('&quot;', name(), '&quot;:')" />
    <xsl:choose>
      <xsl:when test="string(number(.)) = 'NaN'">
        <xsl:value-of select="concat('&quot;',. , '&quot;')" />
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="." />
      </xsl:otherwise>
    </xsl:choose>
    <xsl:if test="position() &lt; last()">,</xsl:if>
  </xsl:template>
</xsl:stylesheet>

Answer 2

var data = [];

$(xml).find('file').each(function(){ 
  var row = {};
  row.mount = this.getAttribute("mount");
  // ...
  data.push(row);
});