SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy parsing json for a page...

    Hi room,

    I'm new to JSON!

    I have a JSON file with multiple containers that has built a webpage. I need to create a javascript from this file to render a page since it was written to use a js library (I think scriptaculous or doj). I want to use jQuery to do this -- at least that's what I'm told I can do. I understand that JSON is a data-exchange language like XML. Here's some code:
    Code:
    var nov_info= {
    'categories':[
    {N:'nwItem1',O:'Composition',V:School Supplies > Paper> Notebooks},
    {N:'nwItem2,O:'Crayons',V:'Elementary > Art > Art Supplies'},
    {N:'nwItem3',O:'Calculators',V:'High School > College Prep> Trigonometry'},
    {N:'nwItem4',O:'Maps',V:'Middle School > US History > Civil War'}
    ],
    
    'brands': [ 
    {N:'nwItem11',O:'National'},
    {N:'nwItem22,O:'Crayola'},
    {N:'nwItem33',O:'Texas Instruments'},
    {N:'nwItem44',O:'Atlas'}
    ],
    
    
    'grades': [
    {U:'http://www.donson.net/cp/Notebooks-Academic-School/RED-43481.',O:Kindergarten},
    {U:'http://www.crayola.com/',O:'Fourth Grade'},
    {U:'http://www.ti.com/',O:'Twelth Grade'},
    {U:'http://shop.nationalgeographic.com/ngs/product/books/atlases-and-reference/national-geographic-9th-edition-atlas-of-the-world---softcover?code=SR60001',O:'Sixth Grade'}
    
    ],
    
    'purchase': [
    {U:'http://www.amazon.com',O:Kindergarten},
    {U:'http://www.walmart.com/',O:'Fourth Grade'},
    {U:'http://www.overstock.com/',O:'Twelth Grade'},
    {U:'http://www.bn.com',O:'Sixth Grade'}
    
    ],
    
    }
    
    alert("I am testing " + nov_info.categories);

    I want to write out a string within an alert or create a webpage displaying this data. Could someone help me out? Btw, I did not declare the 'newItem#' object, but I believe it comes through a webservice data source. Do you need to know what it is in order to help?

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Force Flow. I appreciate your time to research and post a solution. I'm going to read it right now!

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    One solution to this problem is to make use of array properties linking one of the object elements in the array to access the array elements. As an example, here is an array
    "test()" with two object elements that have in turn two elements: name and value.

    var test=[{name:"aa",value:5},{name:"bb",value:10}];
    The name element can be used to access the first object as follows
    test["aa"]=test[0]; test["bb"]=test[1];
    The value can then be obtained using test["aa"] instead of the test[0] method.
    All of the following give the same result:
    alert(test[1].value)
    alert(test["bb"].value)
    alert(test.bb.value)

    The code below makes use of the method to construct hash tables for each of the arrays. The information within the arrays is then accessible using plain english references, rather than [0] type references. The script writes several examples to the page so that you can see the result.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Array Access</title>
    <script type="text/javascript">
    <!--
     
    var categories= [ {N:"nwItem1",O:"Composition",V:"School Supplies > Paper> Notebooks"},
    {N:"nwItem2",O:"Crayons",V:"Elementary > Art > Art Supplies"},
    {N:"nwItem3",O:"Calculators",V:"High School > College Prep> Trigonometry"},
    {N:"nwItem4",O:"Maps",V:"Middle School > US History > Civil War"}];
    // hash table
    for( var i=0;i<categories.length;i++){categories[categories[i].N]=categories[i]; }
    //
    var brands= [ 
    {N:"nwItem11",O:"National"},
    {N:"nwItem22",O:"Crayola"},
    {N:"nwItem33",O:"Texas Instruments"},
    {N:"nwItem44",O:"Atlas"}
    ]
    // hash table
    for( var i=0;i<brands.length;i++){brands[brands[i].N]=brands[i]; }
    //
    var grades= [
    {U:"http://www.donson.net/cp/Notebooks-Academic-School/RED-43481.",O:"Kindergarten"},
    {U:"http://www.crayola.com/",O:"Fourth*_Grade"},
    {U:"http://shop.nationalgeographic.com/ngs/product/books/atlases-and-reference/national-geographic-9th-edition-atlas-of-the-world---softcover?code=SR60001",O:"Sixth_Grade"},
    {U:"http://www.ti.com/",O:"Twelfth_Grade"}
    ]
    // hash table
    for( var i=0;i<grades.length;i++){grades[grades[i].O]=grades[i]; }
    //
    var purchase= [
    {U:"http://www.amazon.com",O:"Kindergarten"},
    {U:"http://www.walmart.com",O:"Fourth_Grade"},
    {U:"http://www.bn.com",O:"Sixth_Grade"},
    {U:"http://www.overstock.com",O:"Twelfth_Grade"}
    ]
    // hash table
    for( var i=0;i<purchase.length;i++){purchase[purchase[i].O]=purchase[i]; }
    //
     
    var nov_info=[categories, brands, grades, purchase]; 
    // create properties to access other arrays
    nov_info["categories"]=categories;                       
    nov_info["brands"]=brands;                               
    nov_info["grades"]=grades;                               
    nov_info["purchase"]=purchase;                           
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; font-size:13px; font-weight:normal; color:#000; } 
    -->
    </style>
    </head>
     
    <body>
     
    <script type="text/javascript">
    <!--
     var build='<p>nov_info.purchase.Sixth_Grade.U= <b>'+nov_info.purchase.Sixth_Grade.U+'<\/b><\/p>\n';
        build+='<p>nov_info.brands.nwItem33e.O= <b>'+nov_info.brands.nwItem33.O+'<\/b><\/p>\n';
        build+='<p>nov_info.categories.nwItem4.V= <b>'+nov_info.categories.nwItem4.V+'<\/b><\/p>\n';
        build+='<p>nov_info.grades.Twelfth_Grade.O= <b>'+nov_info.grades.Twelfth_Grade.O+'<\/b><\/p>\n';
        build+='<p>nov_info.purchase.Kindergarten.U= <b>'+nov_info.purchase.Kindergarten.U+'<\/b><\/p>\n';
     document.write(build);
    //-->
    </script>
     
    </body>
     
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •