How manipulate xml file using javascript/jquery

Question

I need to manipulate a xml file on my page. The XML contains 1 to n elements of the type field. Each field contains a dbname. With this information i need to create a new display tag and for each 1 to n field elements need to be added there

This is my source xml

    <form>
        <version>DE_TEST_1</version>
        <description>METAXA V3.7.5-0 generated Meta Data XML for Form</description>
        <author>METAXA</author>
        <date>2014-09-02T15:59:31.428+02:00</date>
        <pages height="297.0000885009766" width="210.00014478895395">
            <page fillWithPattern="true" order="1">
                <clips>
                    <clip display="SHOW" height="148.5" id="obere Hälfte" width="210.0" xPos="0.0" yPos="0.0"/>
                    <clip display="SHOW" height="148.5" id="untere Hälfte" width="210.0" xPos="0.0" yPos="148.5"/>
                    <clip display="SHOW" height="297.0" id="komplett" width="210.0" xPos="0.0" yPos="0.0"/>
                </clips>
            </page>
        </pages>
    </form>
    <fields>
        <field dbName="txt_StartRZ1_6" exportname="txt_StartRZ1_6" id="txt_StartRZ1_6" order="344" originX="0.0" originY="0.0" page="1" type="text" withprefill="false">
            <fixedvalue/>
            <storage type="string"/>
            <hwr country="DE" dataformat="DIGIT" language="de" strokemapping="center_of_gravitiy"/>
            <layout ismultiarea="true">
                <font alignment="LEFT" color="#000000" name="Arial" size="10.0" style="NORMAL"/>
                <area height="6.462202453613281" id="0" width="4.8778568691677515" xPos="42.004897308349605" yPos="109.39709082709422"/>
                <area height="0.8382132636176215" id="2" width="0.5831416236029731" xPos="41.31027723948161" yPos="109.43731231689455"/>
                <area height="6.462202453613281" id="1" width="4.8778568691677515" xPos="47.003407880995006" yPos="109.39709082709422"/>
                <area height="6.4621809217664925" id="4" width="4.8778568691677515" xPos="56.999718475341794" yPos="109.35689086914064"/>
                <area height="6.462202453613281" id="3" width="4.8778568691677515" xPos="52.0015631781684" yPos="109.39709082709422"/>
            </layout>
        </field>
    </fields>

The new additionl display tag should be generated like the example at the bottom.

<display>
    <labels>
        <fieldlabels>
            <label labelid="txt_StartRZ1_6">
                <text>txt_StartRZ1_6</text>
                <text locale="en">txt_StartRZ1_6</text>
            </label>                
        </fieldlabels>
        <grouplabels>
        </grouplabels>
        <rangelabels>
        </rangelabels>
        <strings/>          
    </labels>
    <styles>
        <style selector="txt_StartRZ1_5"/>
        <style selector="txt_StartRZ1_6"/>
    </styles>
    <channels>
        <channel name="tablet">
            <viewdef name="landscape">
                <section descriptionId="section__id_description" id="section__id" labelStyle="section__id_label_style" shortTitleId="section__id_short_title" style="section__id_style" titleId="section__id_title">
                    <panel descriptionId="panel__id_description" id="panel__id" style="panel__id_style" titleId="panel__id_title">
                        <item id="txt_StartRZ1_6_item_id" ref="txt_StartRZ1_6">
                            <widget id="txt_StartRZ1_6_widget_id" widget="TEXTFIELD"/>
                        </item>
                    </panel>
                </section>
            </viewdef>
        </channel>
    </channels>
</display>

Is there javascript/jquery library which I can use for this?

Thanks for the adivce

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

The answer is... yes!

See this existing question, which is essentially a restatement of yours, but with a smaller input: How to parse xml using jquery

From the answer there:

jQuery.parseXML: http://api.jquery.com/jQuery.parseXML/

Example:

var xml = $.parseXML(yourfile.xml),
  $xml = $( xml ),
  $test = $xml.find('test');

console.log($test.text());

edited May 23 '17 at 12:00

Community

1
1

answered Sep 30 '14 at 14:37

Joseph Sikorski

715
6
14

score 0 · Answer 2 · answered Sep 30 '14 at 14:53

jQuery knows how to deal with XML.

Here is a tutorial about all the stuff you might encount : http://tech.pro/tutorial/877/xml-parsing-with-jquery

Having the following XML retrieved after an ajax call :

    <?xml version="1.0" encoding="utf-8" ?>
<RecentTutorials>
  <Tutorial author="The Reddest">
    <Title>Silverlight and the Netflix API</Title>
    <Categories>
      <Category>Tutorials</Category>
      <Category>Silverlight 2.0</Category>
      <Category>Silverlight</Category>
      <Category>C#</Category>
      <Category>XAML</Category>
    </Categories>
    <Date>1/13/2009</Date>
  </Tutorial>
  <Tutorial author="The Hairiest">
    <Title>Cake PHP 4 - Saving and Validating Data</Title>
    <Categories>
      <Category>Tutorials</Category>
      <Category>CakePHP</Category>
      <Category>PHP</Category>
    </Categories>
    <Date>1/12/2009</Date>
  </Tutorial>
  <Tutorial author="The Tallest">
    <Title>Silverlight 2 - Using initParams</Title>
    <Categories>
      <Category>Tutorials</Category>
      <Category>Silverlight 2.0</Category>
      <Category>Silverlight</Category>
      <Category>C#</Category>
      <Category>HTML</Category>
    </Categories>
    <Date>1/6/2009</Date>
</Tutorial>
  <Tutorial author="The Fattest">
    <Title>Controlling iTunes with AutoHotkey</Title>
    <Categories>
      <Category>Tutorials</Category>
      <Category>AutoHotkey</Category>
    </Categories>
    <Date>12/12/2008</Date>
  </Tutorial>
</RecentTutorials>

Your approach can be something like :

function parseXml(xml)
{
  //find every Tutorial and print the author
  $(xml).find("Tutorial").each(function()
  {
    $("#output").append($(this).attr("author") + "<br />");
  });

  // Output:
  // The Reddest
  // The Hairiest
  // The Tallest
  // The Fattest
}



//print the date followed by the title of each tutorial
$(xml).find("Tutorial").each(function()
{
  $("#output").append($(this).find("Date").text());
  $("#output").append(": " + $(this).find("Title").text() + "<br />");
});

// Output:
// 1/13/2009: Silverlight and the Netflix API
// 1/12/2009: Cake PHP 4 - Saving and Validating Data
// 1/6/2009: Silverlight 2 - Using initParams
// 12/12/2008: Controlling iTunes with AutoHotkey

Anything you want to find, you'll find in that tutorial.

How manipulate xml file using javascript/jquery

2 Answers2