Solved

json image gallery

Posted on 2011-03-17
4
255 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
need some regex help 15 29
jquery, populate, auto complete 8 49
Coldfusion RegEx 8 63
ajaxSubmit is giving me an error 1 37
Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
In a recent question (https://www.experts-exchange.com/questions/28997919/Pagination-in-Adobe-Acrobat.html) here at Experts Exchange, a member asked how to add page numbers to a PDF file using Adobe Acrobat XI Pro. This short video Micro Tutorial sh…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

772 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