【发布时间】：2018-02-01 11:07:06
【问题描述】：
我从 Microsoft Recognition Services 的人脸检测 API 获取 JSON 并显示结果。我已经创建了几个结果，这是唯一一个可折叠四倍的结果。
JSON 对象的大小为 9，从 0 ~ 8。它正在创建 50 多个对象，每个人 5 个。
正确的做法是为每个人创建一个可折叠的，这将给出 9 个结果。
代码：
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++);
}
}
}
【问题讨论】：
-
objJSON[obj].faceAttributes.hair.hairColor是什么样的？如果没有看到完整的 JSON 结构，这个问题很难回答。此外，您不应该使用for..in来迭代数组或对象。采用不同的策略会更安全：stackoverflow.com/questions/500504/… -
好像 for()for()count++ 所以 5 * hairccolor count？
标签： javascript json face-recognition