Solved

json image gallery

Posted on 2011-03-17
4
256 Views
Last Modified: 2012-05-11
I am a newbie to jason and ajax but nonetheless I have been given the task of creating an image gallery that is populated by the following json. I have no idea where to start and would appreciate any direction you can provide. Also, the second part of the task is to create checkboxes that when clicked ONLY display those particular images based on "TargetArea"

searsJSONFeed({  
      "Products":
      [
            
            {
                  "PID":"027B014668030001P",
                  "ProductDescription":"Women's Firm Control Be Fat Free Cap Sleeve Tee Shapewear",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy",
                  "Style":"Meant to Be Seen",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC01466840",
                  "ProductLink":"/p_10151_10104_027B014668030001P"
            },
            
            {
                  "PID":"027B014674640001P",
                  "ProductDescription":"Women's Firm Control Be Fat Free Tank Shapewear ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy",
                  "Style":"Meant to Be Seen",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC01467484",
                  "ProductLink":"/p_10151_10104_027B014674640001P"
            },
            
            {
                  "PID":"027B020532680001P",
                  "ProductDescription":"Women's Plus Be Fat Free Leggings",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy, Thighs",
                  "Style":"Meant to Be Seen",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02053268",
                  "ProductLink":"/p_10151_10104_027B020532680001P"
            },
            
            {
                  "PID":"027B020533080001P",
                  "ProductDescription":"Women's Be Fat Free Leggings ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy, Thighs",
                  "Style":"Meant to Be Seen",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02053308",
                  "ProductLink":"/p_10151_10104_027B020533080001P"
            },
            
            {
                  "PID":"027B020533800001P",
                  "ProductDescription":"Women's Plus Be Fat Free Shaping Boyshorts ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy",
                  "Style":"Meant to Be Seen",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02110450",
                  "ProductLink":"/p_10151_10104_027B020533800001P"
            },
            
            {
                  "PID":"027B021104500001P",
                  "ProductDescription":"Women's Be Fat Free Shaping Boyshorts",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy",
                  "Style":"Meant to Be Seen",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02115310",
                  "ProductLink":"/p_10151_10104_027B021104500001P"
            },
            
            {
                  "PID":"027B021173380001P",
                  "ProductDescription":"Women's Plus Be Fat Free Lace Camisole",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy",
                  "Style":"Meant to Be Seen",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02117476",
                  "ProductLink":"/p_10151_10104_027B021173380001P"
            },
            
            {
                  "PID":"027B021174760001P",
                  "ProductDescription":"Women's Be Fat Free Lace Trimmed Camisole",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy",
                  "Style":"Meant to Be Seen",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02117476",
                  "ProductLink":"/p_10151_10104_027B021174760001P"
            },
            
            {
                  "PID":"027B021181310001P",
                  "ProductDescription":"Women's Torsette Waistnipper ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Waist, Tummy, Back",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02118131",
                  "ProductLink":"/p_10151_10104_027B021181310001P"
            },
            
            {
                  "PID":"027B021157500001P",
                  "ProductDescription":"Women's Plus Torsette Waistnipper",
                  "Colors":"More Colors Available",
                  "TargetArea":"Waist, Tummy, Back",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02115750",
                  "ProductLink":"/p_10151_10104_027B021157500001P"
            },
            
            {
                  "PID":"027B021394270001P",
                  "ProductDescription":"Women's Plus Torsette Body Briefer ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Waist, Tummy, Hips, Back",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02139427",
                  "ProductLink":"/p_10151_10104_027B021394270001P"
            },
            
            {
                  "PID":"027B021395330001P",
                  "ProductDescription":"Women's Torsette Body Briefer ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Waist, Tummy, Hips, Back",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC02139533",
                  "ProductLink":"/p_10151_10104_027B021395330001P"
            },
            
            {
                  "PID":"027B405294110001P",
                  "ProductDescription":"Women's Microfiber Light Control Body Briefer ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC40527111",
                  "ProductLink":"/p_10151_10104_027B405294110001P"
            },
            
            {
                  "PID":"027B405349110001P",
                  "ProductDescription":"Women's Microfiber Moderate Control Thigh Slimmer ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Thighs",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC69718511",
                  "ProductLink":"/p_10151_10104_027B405349110001P"
            },
            
            {
                  "PID":"027B696845110001P",
                  "ProductDescription":"Women's Light Control Lace Trimmed Boyshort ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC40536411",
                  "ProductLink":"/p_10151_10104_027B696845110001P"
            },
            
            {
                  "PID":"027B696929110001P",
                  "ProductDescription":"Women's Moderate Control Waistnipper Briefs",
                  "Colors":"More Colors Available",
                  "TargetArea":"Waist, tummy",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC40540711",
                  "ProductLink":"/p_10151_10104_027B696929110001P"
            },
            
            {
                  "PID":"027B435018160001P",
                  "ProductDescription":"Women's Shapewear Firm Control Torsette ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Waist, Tummy, Hips, Back",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC43501855",
                  "ProductLink":"/p_10151_10104_027B435018160001P"
            },
            
            {
                  "PID":"027B697316110001P",
                  "ProductDescription":"Women's Light Control Lace Trim Camisole",
                  "Colors":"More Colors Available",
                  "TargetArea":"Tummy",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC69722211",
                  "ProductLink":"/p_10151_10104_027B697316110001P"
            },
            
            {
                  "PID":"027B013122030001P",
                  "ProductDescription":"Women's Shapewear Strapless Slip",
                  "Colors":"",
                  "TargetArea":"Waist, Tummy, Bottom, Thigh",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027B013122030001",
                  "ProductLink":"/p_10151_10104_027B013122030001P"
            },
            
            {
                  "PID":"027B696929110001P",
                  "ProductDescription":"Women's Moderate Control Waistnipper Briefs ",
                  "Colors":"More Colors Available",
                  "TargetArea":"Waist, tummy",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC40540711",
                  "ProductLink":"/p_10151_10104_027B696929110001P"
            },
            
            {
                  "PID":"027B698142110001P",
                  "ProductDescription":"Women's Firm Control Waistnipper Brief",
                  "Colors":"More Colors Available",
                  "TargetArea":"Waist, tummy",
                  "Style":"Classic Shapewear",
                  "ImageURL":"http://s.shld.net/is/image/Sears/027000VC69818711",
                  "ProductLink":"/p_10151_10104_027B698142110001P"
            }
            
      ]
})
0
Comment
Question by:swaggrK
  • 2
  • 2
4 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 35161876
You may start learning JSON from here : http://json.org
put your object inside this window : http://jsonviewer.stack.hu/
click on the tab [ viewer ]


var json = {"Products":[{"PID":"0 .... 98142110001P"}]};

Open in new window


to loop over each product :

for(var i=0,i<json.Products.length;i++) {
// do something with each product (also a JSON object)
}

Open in new window


To get an object we may use two notations, be careful with the case :

json.Products[0] or json["Products"][0]

inside the loop the following

json["Products"][i].PID 
json["Products"][i].["TargetArea"]
json["Products"][i].ProductDescription

Open in new window


return respectively :

"027B014668030001P" if i = 0
"Waist, tummy" if i = (json["Products"].length-1)
"Women&#39;s Firm Control Waistnipper Brief" if i = (json["Products"].length-1)
0
 

Author Comment

by:swaggrK
ID: 35165817
This is what I have so far. Is this correct?
Also, I am not sure about the placement of:
json["Products"][i].PID 
json["Products"][i].["TargetArea"]
json["Products"][i].ProductDescription

Open in new window


Or, how to output(return respectively)


My code...
 
<html>
<head>

<script type="text/javascript">
searsJSONFeed({  
	

var json = {"Products":[
		
				for(var i=0,i<json.Products.length;i++) {	
	
		{

			
			
		"PID":"027B014668030001P",
			"ProductDescription":"Women&#39;s Firm Control Be Fat Free Cap Sleeve Tee Shapewear",
			"Colors":"More Colors Available",
			"TargetArea":"Tummy",
			"Style":"Meant to Be Seen",
			"ImageURL":"http://s.shld.net/is/image/Sears/027000VC01466840",
			"ProductLink":"/p_10151_10104_027B014668030001P"
		}
		},
		
		for(var i=0,i<json.Products.length;i++) {	
		{
			"PID":"027B014674640001P",
			"ProductDescription":"Women&#39;s Firm Control Be Fat Free Tank Shapewear ",
			"Colors":"More Colors Available",
			"TargetArea":"Tummy",
			"Style":"Meant to Be Seen",
			"ImageURL":"http://s.shld.net/is/image/Sears/027000VC01467484",
			"ProductLink":"/p_10151_10104_027B014674640001P"
		}
		},
		
		
	]
})
</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 35165916
json is a variable (like integer, string or array)
you can't put a loop inside a variable

What's searsJSONFeed ? Where do you get it ?

>Or, how to output(return respectively)

to loop over each product :
for(var i=0,i<json.Products.length;i++) {
// do something with each product (also a JSON object)
}

Open in new window


if you want to put each image in the document you need to create a image object for each one (IMG tag) :

var img = document.createElement("img");
img.setAttribute("src", json["Products"][i].ImageURL);
document.getElementsByTagName("body")[0].appendChild( img );

Open in new window


A good thread to follow here : http://fr.w3support.net/index.php?db=so&id=226847
0
 

Author Comment

by:swaggrK
ID: 35166026
I have moved the loop. I guess right now I am just trying to get my code placement correct.
 
<head>

<script type="text/javascript">
searsJSONFeed({  
	

var json = {"Products":[
		
		{
			"PID":"027B014668030001P",
			"ProductDescription":"Women&#39;s Firm Control Be Fat Free Cap Sleeve Tee Shapewear",
			"Colors":"More Colors Available",
			"TargetArea":"Tummy",
			"Style":"Meant to Be Seen",
			"ImageURL":"http://s.shld.net/is/image/Sears/027000VC01466840",
			"ProductLink":"/p_10151_10104_027B014668030001P"
		},
		
		{
			"PID":"027B014674640001P",
			"ProductDescription":"Women&#39;s Firm Control Be Fat Free Tank Shapewear ",
			"Colors":"More Colors Available",
			"TargetArea":"Tummy",
			"Style":"Meant to Be Seen",
			"ImageURL":"http://s.shld.net/is/image/Sears/027000VC01467484",
			"ProductLink":"/p_10151_10104_027B014674640001P"
		}
		
		
	]
})
for(var i=0,i<json.Products.length;i++) {
// do something with each product (also a JSON object)
}

var img = document.createElement("img");
img.setAttribute("src", json["Products"][i].ImageURL);
document.getElementsByTagName("body")[0].appendChild( img );
</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

Open in new window


searsJasonFeed is what they gave me
The name of this information was searsjason.json
 
searsJSONFeed({  
	"Products":
	[
		
		{
			"PID":"027B014668030001P",
			"ProductDescription":"Women&#39;s Firm Control Be Fat Free Cap Sleeve Tee Shapewear",
			"Colors":"More Colors Available",
			"TargetArea":"Tummy",
			"Style":"Meant to Be Seen",
			"ImageURL":"http://s.shld.net/is/image/Sears/027000VC01466840",
			"ProductLink":"/p_10151_10104_027B014668030001P"
		},
		
		{
			"PID":"027B014674640001P",
			"ProductDescription":"Women&#39;s Firm Control Be Fat Free Tank Shapewear ",
			"Colors":"More Colors Available",
			"TargetArea":"Tummy",
			"Style":"Meant to Be Seen",
			"ImageURL":"http://s.shld.net/is/image/Sears/027000VC01467484",
			"ProductLink":"/p_10151_10104_027B014674640001P"
		}

	]
})

Open in new window

0

Featured Post

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

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

839 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