Solved

json image gallery

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Ajax not completing 11 79
How do I interpret the HTTP accept header? 5 75
Session / variables no longer available (PHP) 4 51
Scrolling feed with Coldfusion 3 32
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…
A company’s greatest vulnerability is their email. CEO fraud, ransomware and spear phishing attacks are the no1 threat to a company’s security. Cybercrime is responsible for the largest loss of money to companies today with losses projected to r…

919 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

13 Experts available now in Live!

Get 1:1 Help Now