?
Solved

Extracting JSON data similar to selecting with XSL

Posted on 2012-03-17
7
Medium Priority
?
227 Views
Last Modified: 2012-03-21
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
Comment
Question by:Alan Varga
  • 5
  • 2
7 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 37733125
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
 
LVL 2

Author Comment

by:Alan Varga
ID: 37733837
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
 
LVL 83

Expert Comment

by:leakim971
ID: 37733860
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
LVL 2

Author Comment

by:Alan Varga
ID: 37735863
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
 
LVL 2

Author Comment

by:Alan Varga
ID: 37741615
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
 
LVL 2

Author Comment

by:Alan Varga
ID: 37747180
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
 
LVL 2

Author Closing Comment

by:Alan Varga
ID: 37747190
I really appreciate the simplicity of your answer; it was clear, even for a hobbyist like me.  Thanks!
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question