$.getJSON working, but...
Hello everyone, in a nutshell, I'd like to find a way to parse a JSON file in a way one would expect given its structure. For example, the JSON file looks like this:
- "Products":
[
{
"Name":"Northstar CAD",
"Image":"/solution_guides/bpscreenshots/firstcalcad_sm.jpg",
"Description":"Northstar CAD is based on advanced analytical routing techniques providing communication centers with true decision support as well as integrated Esri GIS.",
"Platform":"Server",
"DescriptionURL":"http://www.logisys911.com/NorthStarCAD.html",
"CompanyName":"Logistic Systems, Inc.",
"CompanyURL":"http://www.logisys911.com/",
"FeatureTag":"11",
"Tags":
[
{
"IndustryFocus":["Computer-Aided Dispatch"],
"URL":["#"]
}
]
},
- ...
And what I'd like to do is populate a table with all that, so I have this set up:
- <tbody id="bodyTable">
- <!-- JSON goes here -->
</tbody>
And the javascript looks like this:
- $('#clickme').click(function () {
var featured, image;
$.getJSON("solutionsdirectory.js", function (json) {
this.async = false; // asynchronous call is set to false, so it becomes synchronous
//$('#bodyTable').append('<tr id="tester"><td>test</td></tr>');
$.each(json.Products, function () {
var self = this;
featured = (this.FeatureTag != "") ? ("featured") : ("");
image = (this.Image != "") ? ('<img src="'+this.Image+'" alt="'+this.Name+'" />') : ("");
var iFocus = "";
var comma = 0, addComma = "", iFLength = this.Tags[0].IndustryFocus.length;
$('#tester').append("<span>test!</span>");
$.each(this.Tags[0].IndustryFocus, function (i) {
iFLength = self.Tags[0].IndustryFocus.length;
//$.each(this, function (i) {
//console.log('that: '+this+", i: "+i+", comma: "+comma);
//console.log("self length: "+self.Tags[0].IndustryFocus.length+", this length: "+this.length);
addComma = ((iFLength > 1) && (i < iFLength-1)) ? (", ") : ("");
iFocus += this+addComma;
//console.log("this.length: "+this.length);
//console.log(iFocus);
//});
//$('#bodyTable').find('<a href=').append(this+addComma);
comma++;
//iFocus += this+", ";
//console.log("this: "+this+", i: "+i);
});
//console.log("iFocus: "+iFocus);
//$('#bodyTable').append('<tr class="'+featured+'"><td><a class="toggle" title="View Description"><span class="featuretag">'+this.FeatureTag+'</span>'+this.Name+'</a><div class="description"><a href="'+this.DescriptionURL+'" >'+image+'</a><p>'+this.Description+'<a href="'+this.DescriptionURL+'">Find out more</a>.</p><p><strong>Industry Focus:</strong><a href="'+this.Tags[0].URL+'" class="focus">'+this.Tags[0].IndustryFocus+'</a><br /><strong>Platform:</strong>'+this.Platform+'</p></div></td><td><a href="'+this.CompanyURL+'" >'+this.CompanyName+'</a></td></tr>');
/*
$.each(this.Tags, function () {
$.each(this.URL, function () {
$('#bodyTable').find('strong').append('<a href="'+this+'" class="focus">');
//console.log("URL: "+this);
});
$.each(this.IndustryFocus, function () {
$('#bodyTable').find('strong').next().append(this+'</a><br />');
//console.log("iFocus: "+this);
});
});
$('#bodyTable').find('td').append('<strong>Platform:</strong>'+this.Platform+'</p></div></td><td><a href="'+this.CompanyURL+'" >'+this.CompanyName+'</a></td></tr>');
//'<a href="'+this.Tags[0].URL+'" class="focus">'+this.Tags[0].IndustryFocus+'</a><br />');
*/
//$('#bodyTable').find('strong').next().next().append('<strong>Platform:</strong>'+this.Platform+'</p></div></td><td><a href="'+this.CompanyURL+'" >'+this.CompanyName+'</a></td></tr>');
});
fInitiate();
});
Where fInitiate uses a jQuery plug-in to make the <tr>s toggle hide and show. My problem is that I want to be able to separate the #bodyTable action into two parts: the first would parse the first half of the JSON data, and the second would go through the tags. Some tags have multiple URLs and I have to generate a list of <a>s for each one. How do I do this with .append()? if I just do a $('#bodyTable').append('<tr><td>[stuff]').append('</td></tr>'); it doesn't work.
Thanks,
Eggers