Link to home
Start Free TrialLog in
Avatar of swaggrK
swaggrK

asked on

json image gallery

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"
            }
            
      ]
})
SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of swaggrK
swaggrK

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of swaggrK
swaggrK

ASKER

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