このページの下の方に、さまざまなカテゴリをクリックして、該当する企業のロゴを解析できます。配列の最後のアイテム (「Wesco」ロゴ) は、「ディストリビューション」カテゴリにのみ表示されるはずですが、いくつかのカテゴリに表示されます。json ファイルの内容は次のとおりです。
{"customers": [
{"customerName": "3M", "imageLink": "/images/client-logos/logo-3m.jpg", "category": "healthcare,manufacturing","link":"http://www.3m.com"},
{"customerName": "Acxiom", "imageLink": "/images/client-logos/logo-acxiom.jpg", "category": "info-tech,services","link":"http://www.acxiom.com"},
{"customerName": "Adobe", "imageLink": "/images/client-logos/logo-adobe.jpg", "category": "info-tech","link":"http://www.adobe.com"},
{"customerName": "Alcatel-lucent", "imageLink": "/images/client-logos/logo-alcatel.jpg", "category": "telecommunications,info-tech","link":"http://www.alcatel-lucent.com"},
{"customerName": "Amdocs", "imageLink": "/images/client-logos/logo-amdocs.jpg", "category": "info-tech,services","link":"http://www.amdocs.com"},
{"customerName": "Arris", "imageLink": "/images/client-logos/logo-arris.jpg", "category": "info-tech,manufacturing","link":"http://www.arrisi.com"},
{"customerName": "Aspect", "imageLink": "/images/client-logos/logo-aspect.jpg", "category": "info-tech","link":"http://www.aspect.com"},
{"customerName": "Berylhealth", "imageLink": "/images/client-logos/logo-beryl.jpg", "category": "healthcare","link":"http://www.berylhealth.com"},
{"customerName": "Bisys", "imageLink": "/images/client-logos/logo-bisys.jpg", "category": "info-tech","link":"www.citibank.com"},
{"customerName": "Broadview Networks", "imageLink": "/images/client-logos/logo-broadview.jpg", "category": "telecommunications","link":"http://www.broadviewnet.com"},
{"customerName": "Butler Schein", "imageLink": "/images/client-logos/logo-butler.jpg", "category": "info-tech,healthcare,distribution","link":"http://www.butlerschein.com"},
{"customerName": "Carlton-Bates", "imageLink": "/images/client-logos/logo-cbc.jpg", "category": "info-tech,distribution","link":"https://www.carltonbates.com"},
{"customerName": "Cisco", "imageLink": "/images/client-logos/logo-cisco.jpg", "category": "info-tech,manufacturing","link":"http://www.cisco.com"},
{"customerName": "Citrix", "imageLink": "/images/client-logos/logo-citrix.jpg", "category": "info-tech","link":"http://www.citrix.com"},
{"customerName": "Comverse", "imageLink": "/images/client-logos/logo-comverse.jpg", "category": "info-tech","link":"http://www.comverse.com"},
{"customerName": "Convergys", "imageLink": "/images/client-logos/logo-convergys.jpg", "category": "info-tech","link":"http://www.convergys.com"},
{"customerName": "Cypress Communications", "imageLink": "/images/client-logos/logo-cypress.jpg", "category": "telecommunications","link":"http://www.cypresscommunications.net"},
{"customerName": "Deloitte", "imageLink": "/images/client-logos/logo-deloitte.jpg", "category": "services","link":"http://www.deloitte.com"},
{"customerName": "Ecova", "imageLink": "/images/client-logos/logo-ecova.jpg", "category": "services","link":"http://www.ecova.com"},
{"customerName": "Gartner", "imageLink": "/images/client-logos/logo-gartner.jpg", "category": "services","link":"http://www.gartner.com"},
{"customerName": "GE Healthcare", "imageLink": "/images/client-logos/logo-ge.jpg", "category": "healthcare,info-tech,manufacturing","link":"http://www.gehealthcare.com"},
{"customerName": "Henry Schein", "imageLink": "/images/client-logos/logo-henry.jpg", "category": "info-tech,healthcare,distribution","link":"http://www.henryschein.com"},
{"customerName": "HP", "imageLink": "/images/client-logos/logo-hp.jpg", "category": "info-tech,services","link":"http://www.hp.com"},
{"customerName": "Infor", "imageLink": "/images/client-logos/logo-infor.jpg", "category": "info-tech","link":"http://www.infor.com"},
{"customerName": "Intuit", "imageLink": "/images/client-logos/logo-intuit.jpg", "category": "info-tech","link":"http://www.intuit.com"},
{"customerName": "Ixia", "imageLink": "/images/client-logos/logo-ixia.jpg", "category": "info-tech,manufacturing","link":"http://www.ixiacom.com"},
{"customerName": "Jack Henry", "imageLink": "/images/client-logos/logo-jack.jpg", "category": "info-tech","link":"http://www.jackhenry.com"},
{"customerName": "Marconi", "imageLink": "/images/client-logos/logo-marconi.jpg", "category": "telecommunications,info-tech","link":"#"},
{"customerName": "McKesson", "imageLink": "/images/client-logos/logo-mckesson.jpg", "category": "healthcare,info-tech","link":"http://www.mckesson.com"},
{"customerName": "Mmodal", "imageLink": "/images/client-logos/logo-mmodal.jpg", "category": "info-tech,healthcare","link":"http://mmodal.com"},
{"customerName": "Motorola", "imageLink": "/images/client-logos/logo-motorola.jpg", "category": "info-tech,manufacturing","link":"http://www.motorola.com"},
{"customerName": "Nihon Kohden", "imageLink": "/images/client-logos/logo-nihon.jpg", "category": "healthcare,manufacturing","link":"http://www.nihonkohden.com"},
{"customerName": "Owens and Minor", "imageLink": "/images/client-logos/logo-om.jpg", "category": "healthcare,distribution","link":"http://www.owens-minor.com"},
{"customerName": "Paetec", "imageLink": "/images/client-logos/logo-paltec.jpg", "category": "telecommunications","link":"http://www.paetec.com"},
{"customerName": "Polyvision", "imageLink": "/images/client-logos/logo-polyvision.jpg", "category": "telecommunications,manufacturing,distribution","link":"http://polyvision.com"},
{"customerName": "Q2ebanking", "imageLink": "/images/client-logos/logo-q2.jpg", "category": "info-tech","link":"http://q2ebanking.com"},
{"customerName": "Rubbermaid", "imageLink": "/images/client-logos/logo-rubbermaid.jpg", "category": "info-tech,healthcare,manufacturing","link":"http://www.rubbermaid.com"},
{"customerName": "Wesco", "imageLink": "/images/client-logos/logo-wesco.jpg", "category": "distribution","link":"http://www.wesco.com"}
]
}
jquery は次のとおりです。
$.getJSON('customers.json', function(data) {
for(var index in definedCategoryArray){ //cycle through categories array
for(var i=0; i<data.customers.length; i++){ //cycle through json data
if (definedCategoryArray[index]==true){//if the value in the array is true (item checked)
console.log(data.customers[i].customerName+ ' : ' + data.customers[i].category);
if(data.customers[i].category.indexOf(',') != -1) //if there is more than one category, detect the comma seperating them
categoriesPlural = data.customers[i].category.split(',');
else //there is only one category
categoriesPlural[0]=data.customers[i].category;
for (var y = 0; y<categoriesPlural.length; y++){
//console.log(categoriesPlural[y]);
if(categoriesPlural[y] == index){ //match category (from definedCategoryArray index) to items in json object to parse
$('ul#customers').append('<li class="' +data.customers[i].customerName.replace(/\s+/g, '-') + '" id="'+data.customers[i].customerName.replace(/\s+/g, '-')+'"><a href="'+ data.customers[i].link +'" title="'+ data.customers[i].customerName +'" target="_blank"><img src="'+ data.customers[i].imageLink +'" alt="'+ data.customers[i].customerName +'" /></a></li>');
checkDuplicates(data.customers[i].customerName.replace(/\s+/g, '-'));
}
}
}
}
}
}).fail(function() { console.log( "error" ); });