Solved

Extracting JSON data similar to selecting with XSL

Posted on 2012-03-17
7
218 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:VieleFragen
  • 5
  • 2
7 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 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:VieleFragen
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 82

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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 2

Author Comment

by:VieleFragen
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:VieleFragen
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:VieleFragen
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:VieleFragen
ID: 37747190
I really appreciate the simplicity of your answer; it was clear, even for a hobbyist like me.  Thanks!
0

Featured Post

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

820 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