0

I am trying to create a XML file to store data which will be loaded onto my site (which will later become an app)

I understand how to load the frist Categories sections using .find() but not the rest (contained withing Categories and so forth) I also get the sneaking suspicion the XML could be simpler like the name <category name="name"> or something also is it possible to make a template for each page (with jQuery) to load the data automatically? have been looking at handlebars but does seem necessary.

I am very new to JS and XMl as you can probably tell, I hope I have given enough info and made myself clear, any help or insight would be great. Reading below should help make thinks clear.

JS to load and show Categories:

$(document).ready(function () {
$.ajax({
    type: "GET",
    url: "data.xml",
    dataType: "xml",
    success: xmlParser
   });
});

function xmlParser(xml) {

$('#load').fadeOut();


$(xml).find("category").each(function () {
    $(".categories").append('<dt>' 
        + $(this).find("category-name").text() 
        +  '</dt><dd>' 
        + $(this).find("category-description").text() 
        + '</dd>');
    // $(".category").fadeIn(1000);

 });
}

html:

<dl class="categories margins-removed">  
<!-- Categories show here -->
</dl> 


<div class="main">
    <div align="center" class="loader">
        <img src="loader.gif" id="load"  align="absmiddle"/>
    </div>
</div>

the site will show the Categories first > genres for selected category > list items for selected genre > List item from selected genre (each is a new page)

enter image description here

My Current XML (there are more Categories but there's no point showing the code here.)

<category>
    <category-name>category one</category-name>
    <category-description>what is category one about</category-description>
    <genres>          
        <genre> <!-- start of genre -->
        <name>genre one</name>
        <description>what is genre one about</description>
            <list>
                <item>
                    <img></img>
                    <name></name>
                    <description></description>
                </item>
                <item>
                    <img></img>
                    <name></name>
                    <description></description>
                </item>
                <item>
                    <img></img>
                    <name></name>
                    <description></description>
                </item>
            </list>
        </genre>

        <genre> <!-- start of genre -->
        <name>genre two</name>
        <description>what is genre two about</description>
            <list>
                <item>
                    <img></img>
                    <name></name>
                    <description></description>
                </item>
                <item>
                    <img></img>
                    <name></name>
                    <description></description>
                </item>
                <item>
                    <img></img>
                    <name></name>
                    <description></description>
                </item>
            </list>
        </genre>
    </genres>
</category>
Benjamin
  • 657
  • 2
  • 10
  • 31
  • For Javascript usage you should output data in JSON format, not XML. – skobaljic Feb 13 '15 at 12:09
  • im am writing the XML by hand for now I'm not generating it, it doesn't need to be and that's not what this is about. thanks – Benjamin Feb 13 '15 at 12:17
  • Sorry, I thought you were asking for help. – skobaljic Feb 13 '15 at 12:31
  • why is XML a problem and saying just use JSON is isn't much help since I am new to javascript this I need examples... of how JSON would work with this? – Benjamin Feb 13 '15 at 12:47
  • I see you want to use Javascript, so you should go with JSON because its `markup is a subset of JS object literal notation and has the same basic data types as JavaScript` [more](http://stackoverflow.com/questions/4862310/json-and-xml-comparison). You have some basic tutorials [here](http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/), it can be served cross-domain using JSONP [basic example](http://www.sitepoint.com/jsonp-examples/). – skobaljic Feb 13 '15 at 23:29
  • 1
    You may consider using some of templating engines as [json2html](http://json2html.com/), [mustache.js](https://github.com/janl/mustache.js/) or [Tempo](http://tempojs.com/). Just saying, you should research more before you start building the app. It will be hard to change later on. – skobaljic Feb 13 '15 at 23:29
  • @skobaljic I was looking at handlebars which is based off mustache,js thanks for your help json does seem like the right way to go! – Benjamin Feb 14 '15 at 04:01

0 Answers0