Parsing json for a page

K_Dot · February 9, 2011, 11:23pm

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:


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?

force · February 10, 2011, 6:54pm

A google search brought up this:

http://www.factsandpeople.com/facts-mainmenu-5/26-html-and-javascript/89-jquery-ajax-json-and-php

K_Dot · February 10, 2011, 7:21pm

Thank you Force Flow. I appreciate your time to research and post a solution. I’m going to read it right now!

AllanP · February 13, 2011, 10:45pm

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.

[HIGHLIGHT=“”]
<!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>

</body>

</html>