Solved

Extracting JSON data similar to selecting with XSL

Posted on 2012-03-17
7
216 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 1

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

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 1

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 1

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 1

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript waiting 14 71
Basic JavaScript Question 3 39
validation, if text area is typed or pasted into 2 25
Get the number of current month days 2 11
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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

863 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now