0

This is for a school project where we students have to do various things with XML files. This is the XML file given:

<?xml version="1.0" encoding="UTF-8"?>
<en_iso>
<norms>
    <norm identifier="iso_13857" name="EN ISO 13857">
        <keyword>Security</keyword>
        <keyword>Engines</keyword>
        <replaces/>
    </norm>

    <norm identifier="iso_13849_1" name="EN ISO 13849-1">
        <keyword>Security</keyword>
        <keyword>Engines</keyword>
        <keyword>Controlling</keyword>
        <replaces idref="iso_13857"/>
    </norm>
</norms>

<pubs>
    <pub>
        <title>Norms for Engine Security</title>
        <filename>caise2011sgln.pdf</filename>
        <normref idref="iso_13857"/>
        <normref idref="iso_13849_1"/>
    </pub>
    <pub>
        <title>Setting up Complex Engines</title>
        <filename>coopis2012sln.pdf</filename>
        <normref idref="iso_13849_1"/>
    </pub>
</pubs>
</en_iso>

So this XML contains a list of elements and another list of elements, referencing the former list. Specifically a list of ISO norms and a separate list of publications referencing one or many of the norms given.

We had to create an XSD, we had to use XPath and do some XSLT with the source XML. The last "bonus" part of the project would be to "come up with a creative idea on your own".

My idea: I would like to create an HTML file and populate a dropdown with the norms names from the XML using jquery. I would then like to fill a SPAN (or similar) with the filename(s) of the publications relevant to a norm selected in the dropdown.

Kind of like:

Norm:
[EN ISO 13849-1]
Files:
caise2011sgln.pdf
coopis2012sln.pdf

or

Norm:
[EN ISO 13857]
Files:
caise2011sgln.pdf

I tried to hack together some samples from the web and from here, for example dynamic load data from xml to drop down box with jquery or create drop down dynamically from xml but only ever got the dropdown to populate - if at all - but never managed to have the filenames displayed at all. I'm at a loss here.

This is the current HTML with only the dropdown working:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
         $(document).ready(function () {
             $.ajax({
                 type: "GET",
                 url: "source.xml",
                 dataType: "xml",
                 success: function (result) {
                     $(result).find("norm").each(function () {
                         $("#norms").append($("<option />").val($(this).attr("identifier")).text($(this).attr("name")));
                     });
                 }
             });
         });
        </script>

        Norm::
        <select id="norms"></select><br>
        Publications:
        <span id="publications"><!-- filenames --></span>
    </body>
</html>

Many thanks in advance for any help

schaggo
  • 23
  • 3
  • Are you always opening the page from a server, localhost or other? Code shown [works fine here](http://plnkr.co/edit/BWO1ZXGQ7nnHSM9uLsoq?p=preview) – charlietfl Dec 13 '17 at 15:29
  • Locally using a browser. As Chrome blocks local content due to security restrictions, I used Edge and/or Firefox. Both work. Edit: Ok, so Enter sends the comment. Still figuring out stackoverflow. Yes, locally it is working so far but I am at a loss on how to populate the span #publications with the filenames, taken from the elements. – schaggo Dec 13 '17 at 15:34
  • Should work consistently when not run in `file://` protocol – charlietfl Dec 13 '17 at 15:43
  • Repeat same process for publications...loop over `each` `pub` and `find('title').text()` etc – charlietfl Dec 13 '17 at 15:44
  • FYI ... use of xml is not as common any more in web apps as using json data – charlietfl Dec 13 '17 at 15:46
  • I am aware of that @charlietfl, but using a webserver and php to convert XML to JSON and go on from there unfortunately is out of scope for the project. We have to make the tasks work with the XML given. – schaggo Dec 13 '17 at 16:10
  • Thank you @charlietfl I will try to make it work with the suggestion you provided. Specifically, I'm struggling passing over the variable extracted from the first loop to the second loop to read the respective filenames, but I will keep trying. – schaggo Dec 13 '17 at 16:13
  • If `pubs` are children of norms then change the xml nesting so each `` has `` – charlietfl Dec 13 '17 at 16:21
  • Alternatively create an object using `identifier` as keys. Each key would have array of publications that you would push when looping ``. Then use that object to generate html – charlietfl Dec 13 '17 at 16:25

0 Answers0