[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 224
  • Last Modified:

Extracting JSON data similar to selecting with XSL

I am having difficulty finding the right syntax for JSON/jquery to perform an XML transformation.

If I use Sarissa on my local computer, here's the sequence of events I want to replicate:

1.

click on a link (in a <ul> menu) in my HTML document, which passes a parameter to my Javascript

2.

my script forwards the parameter to Sarissa, along with an XML data file, an XSL stylesheet and the id of the <div> element which will contain the results

3.

my stylesheet uses the parameter to select only part of the XML data to create a new <ul> to be used as a submenu

4.

Sarissa populates the <div> with the <ul>

5.

my script changes the z-index of the now-populated <div> so it is visible to the right of the original menu
In my HTML file I declare a couple of scripts in the <head>:

    <script src="change_visibility.js"></script>
    <script src="sarissa.js"></script>

Open in new window


Also in the HTML is the onclick event which calls the script and passes a parameter:

<li><a title="primary records and research aids, e.g. groups, translators"
onclick="buildSubmenu('submenu2');">Research-main</a></li>

Open in new window


This a snippet of my XSL stylesheet:

<xsl:param name="submenu_name"/>

<xsl:template match="/">
<html xsl:version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>
  <body>
      <xsl:apply-templates select="submenus/submenu[@name=$submenu_name]" />
  </body>
</html>
</xsl:template>

Open in new window


and a portion of the XML data:

    <submenu name="submenu2">
        <item text="Burgenland records" hint="Burgenland records" target="records_burg"/>
        <item text="United States and Canada records" hint="United States and Canada records" target="records_us"/>
        <item text="General tips" hint="General research tips" target="records_general"/>
    </submenu>

Open in new window


Here is a portion of the equivalent JSON data, which I have already validated:

    {"submenu": [
        {"name": "submenu2",
         "item": [
            {"text": "Burgenland records",
             "hint": "Burgenland records",
             "target": "records_burg"},

            {"text": "United States and Canada records",
             "hint": "United States and Canada records",
             "target": "records_us"},

            {"text": "General tips",
             "hint": "General research tips",
             "target": "records_general"}
          ]
        },
...

Open in new window


So my question is: What is the syntax I need to extract a portion of JSON data, equivalent to select="submenus/submenu[@name=$submenu_name]"?
0
Alan Varga
Asked:
Alan Varga
  • 5
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
var submenus = json.submenu;
for(var i=0;i<submenus.length;i++) if(submenus[i].name == submenu_name) break;

select = submenus[i];

Open in new window

0
 
Alan VargaAuthor Commented:
Thanks for your quick response.  This looks like a big step in the right direction, but I see I wasn't clear enough in posting my question.  The JSON data is in a text file, not in the script file, so I think I need help reading the text file into a Javascript object (?).  Is that correct?
0
 
leakim971PluritechnicianCommented:
If this text file is on your server it's not a problem, you can load the file with ajax
$.get("/path/to/file.txt", function(json) { // an ajax call with jQuery

        var submenus = json.submenu;
        for(var i=0;i<submenus.length;i++) if(submenus[i].name == submenu_name) break;
        select = submenus[i];

});

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Alan VargaAuthor Commented:
I'm making progress, but I have uncovered a bug in Firefox trying to get and display my JSON data.  (My mini-test works fine in IE9 and Opera 11.61).  I filed bug report 736906 with Bugzilla, and I will have to resume testing this with IE tomorrow night.

Thanks for your help so far; I'll keep you posted on my progress.

Alan
0
 
Alan VargaAuthor Commented:
After much more reading and a very limited test, I think the jQuery function I need is .getJSON instead of just plain .get.  I'll try that with the loop you suggested earlier and see what happens.
0
 
Alan VargaAuthor Commented:
Thanks for your help!  With your code as a staring point, here's what I came up with, and it works exactly as I expected:
    $.getJSON("submenus.json", function(data) {

        for(var iSubmenu=0; iSubmenu<data.submenus.submenu.length; iSubmenu++) {

            if (data.submenus.submenu[iSubmenu].name == sSubmenu)
            {
                sNewHtml += '<ul>\n';
                for(var iItem=0; iItem<data.submenus.submenu[iSubmenu].item.length; iItem++) {
                    sNewHtml += '  <li>';
                    sNewHtml += '    <a';
                    sNewHtml += ' href="#'
                        + data.submenus.submenu[iSubmenu].item[iItem].target
                        + '"';
                    sNewHtml += ' title="'
                        + data.submenus.submenu[iSubmenu].item[iItem].hint
                        + '">';
                    sNewHtml += data.submenus.submenu[iSubmenu].item[iItem].text;
                    sNewHtml += '</a>';
                    sNewHtml += '</li>\n';
                }  // end of iItem For loop
                sNewHtml += '</ul>\n';
                break;
            }  // end if submenu name = passed submenu name

        }  // end of iSubmenu For loop

        alert(sNewHtml);
    });  // end of $.getJSON call

Open in new window


All that's left is to test appending sNewHtml to an existing <div> and making it visible and I'm done.
0
 
Alan VargaAuthor Commented:
I really appreciate the simplicity of your answer; it was clear, even for a hobbyist like me.  Thanks!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now