I'm getting a JSON from the Face Detection API of Microsoft Recognition Services and displaying the results. I have already created several results and this is the only one that is quadruple the collapsible.
The size of the JSON object is 9, from 0 ~ 8. It is creating more than 50 objects, 5 for each person.
The right thing is to create a collapsible for each person, which will give 9 results.
CODE:
function GenerateAttributes__(objJSON){
var count = 0;
for(obj in objJSON){
for(hair in objJSON[obj].faceAttributes.hair.hairColor){
document.getElementById('face-attributes-information').innerHTML +=
'<ul class="collapsible" data-collapsible="accordion">' +
'<li>' +
'<div class="collapsible-header"><i class="fa fa-id-card-o" aria-hidden="true"></i><strong>People (2)</strong></div>' +
'<div class="collapsible-body white">' +
'<ul class="collection">' +
'<li class="collection-item avatar">' +
'<img class="responsive-img circle pink" src="img/neoris-icons/moustache.png">' +
'<span class="title title-collection-content-information">Facial Appearance</span>' +
'<p><strong>Moustache</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new black badge" data-badge-caption=" "><strong>1.0 %</strong></span>' +
'<span class="new black badge" data-badge-caption=" "><strong>Confidence </strong></span>' +
'</a>' +
'</li>' +
'<li class="collection-item avatar">' +
'<i class="fa fa-question-circle circle red" aria-hidden="true"></i>' +
'<img class="responsive-img circle pink" src="img/neoris-icons/beard.png">' +
'<p><strong>Beard</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new black badge" data-badge-caption=" "><strong>1.0 %</strong></span>' +
'<span class="new black badge" data-badge-caption=" "><strong>Confidence </strong></span>' +
'</a>' +
'</li>' +
'<li class="collection-item avatar">' +
'<img class="responsive-img circle pink" src="img/neoris-icons/sideburns.png">' +
'<span class="title title-collection-content-information">Facial Appearance</span>' +
'<p><strong>Sideburns</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new black badge" data-badge-caption=" "><strong>1.0 %</strong></span>' +
'<span class="new black badge" data-badge-caption=" "><strong>Confidence </strong></span>' +
'</a>' +
'</li>' +
'</ul>' +
'</div>' +
'<div class="collapsible-body white">' +
'<ul class="collection">' +
'<li class="collection-item avatar">' +
'<img class="responsive-img circle brown" src="img/neoris-icons/female-hair.png">' +
'<span class="title title-collection-content-information">Hair Color</span>' +
'<p><strong class="brown-text">Brown</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new brown badge" data-badge-caption=" "><strong>1.0 %</strong></span>' +
'<span class="new brown badge" data-badge-caption=" "><strong>Confidence </strong></span>' +
'</a>' +
'</li>' +
'<li class="collection-item avatar">' +
'<img class="responsive-img circle yellow accent-4" src="img/neoris-icons/female-hair.png">' +
'<span class="title title-collection-content-information">Hair Color</span>' +
'<p><strong class="yellow-text">Blond</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new yellow accent-4 badge" data-badge-caption=" "><strong>1.0 %</strong></span>' +
'<span class="new yellow accent-4 badge" data-badge-caption=" "><strong>Confidence </strong></span>' +
'</a>' +
'</li>' +
'<li class="collection-item avatar">' +
'<img class="responsive-img circle black" src="img/neoris-icons/female-hair.png">' +
'<span class="title title-collection-content-information">Hair Color</span>' +
'<p><strong class="black-text">Black</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new black badge" data-badge-caption=" "><strong>1.0 %</strong></span>' +
'<span class="new black badge" data-badge-caption=" "><strong>Confidence </strong></span>' +
'</a>' +
'</li>' +
'<li class="collection-item avatar">' +
'<img class="responsive-img circle teal" src="img/neoris-icons/female-hair.png">' +
'<span class="title title-collection-content-information">Hair Color</span>' +
'<p><strong class="teal-text">Other</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new badge" data-badge-caption=" "><strong>1.0 %</strong></span>' +
'<span class="new badge" data-badge-caption=" "><strong>Confidence </strong></span>' +
'</a>' +
'</li>' +
'<li class="collection-item avatar">' +
'<img class="responsive-img circle grey" src="img/neoris-icons/female-hair.png">' +
'<span class="title title-collection-content-information">Hair Color</span>' +
'<p><strong class="grey-text">Gray</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new grey badge" data-badge-caption=" "><strong>1.0 %</strong></span>' +
'<span class="new grey badge" data-badge-caption=" "><strong>Confidence </strong></span>' +
'</a>' +
'</li>' +
'<li class="collection-item avatar">' +
'<img class="responsive-img circle red" src="img/neoris-icons/female-hair.png">' +
'<span class="title title-collection-content-information">Hair Color</span>' +
'<p><strong class="red-text">Red</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new red badge" data-badge-caption=" "><strong>1.0 %</strong></span>' +
'<span class="new red badge" data-badge-caption=" "><strong>Confidence </strong></span>' +
'</a>' +
'</li>' +
'</ul>' +
'</div>' +
'</li>' +
'</ul>';
console.log("COUNT OBJ: ", count++);
}
}
}
