Solved

Extracting JSON data similar to selecting with XSL

Posted on 2012-03-17
7
214 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

707 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

17 Experts available now in Live!

Get 1:1 Help Now