Solved

json image gallery

Posted on 2011-03-17
4
260 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
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 this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…

688 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