Javascript 在数组中的对象上循环,显示来自JSON的数据 客观的
我希望在数组中循环对象,这样每个使用Javascript 在数组中的对象上循环,显示来自JSON的数据 客观的,javascript,jquery,arrays,for-loop,foreach,Javascript,Jquery,Arrays,For Loop,Foreach,我希望在数组中循环对象,这样每个使用html()的学校都可以从schools.js中的数据中反映其名称、学区以及英语、数学、科学和社会研究的百分比 问题:现在,我只得到阵列中的最后一个学校 是否可以在没有数据id的情况下执行此操作?附属于每一所学校,或者这是确定哪所学校是哪所学校的实际必要条件 scripts.js index.html 高中 密苏里州杰出评估项目 排名依据: 英语 数学 科学类 社会科学课程 tk名称 tk区 -% tk名称 tk区 -% tk名称 tk区 -% tk名称
html()
的学校都可以从schools.js中的数据中反映其名称、学区以及英语、数学、科学和社会研究的百分比
问题:现在,我只得到阵列中的最后一个学校
是否可以在没有数据id的情况下执行此操作?附属于每一所学校,或者这是确定哪所学校是哪所学校的实际必要条件
scripts.js
index.html
高中
密苏里州杰出评估项目
排名依据:
英语
数学
科学类
社会科学课程
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
您必须在javascript中创建一些html模板,并在其中连接可更改的数据,并在每次更新时附加到父元素
var学校=[
{
“名称”:“学校1”,
“地区”:“地区1”,
“盾徽”:“,
“地点”:“,
“英语百分比”:“1%”,
“百分比数学”:“21%”,
“百分比科学”:“41%”,
“社会百分比”:“61%”
},
{
“名称”:“学校2”,
“地区”:“第2区”,
“盾徽”:“,
“地点”:“,
“英语百分比”:“2%”,
“百分比数学”:“22%”,
“百分比科学”:“42%”,
“社会百分比”:“62%”
}];
//生成从1到20的数字
for(var i=0;i ”
)
}
高中
密苏里州杰出评估项目
排名依据:
英语
数学
科学类
社会科学课程
-%
您的javascript正在替换循环中每个学校相同元素中的HTML,这就是为什么您只看到最后一个学校。您需要为每个学校创建一组新的HTML元素(克隆和附加会有帮助),以防止覆盖以前的学校。问题在于使用类选择器时,会选择许多元素。使用.html()
时,它不知道要针对哪个元素
您可以通过使用.eq()
通过索引将特定元素作为目标来轻松解决此问题
// Generate numbers from 1 through 20
for(var i = 0; i < schools.length; i++) {
var schoolID = i + 1
console.log(schoolID);
// Schools
var schoolName = $(".school__name").html(schools[schoolID].name); // Name
var schoolDistrict = $(".school__district").html(schools[schoolID].district); // District
// var schoolCrest = // $(".school__image").attr("src", schools[schoolID].crest) // Crest
// Percentage
var percentEnglish = $(".school__district").html(schools[schoolID].english); // English
var percentMath = $(".school__district").html(schools[schoolID].math); // Math
var percentScience = $(".school__district").html(schools[schoolID].science); // Science
var percentSocial = $(".school__district").html(schools[schoolID].social); // Social Science
}
var schools = [
{
"name": "school1",
"district": "district1",
"crest": "",
"location": "",
"percentEnglish": "1%",
"percentMath": "21%",
"percentScience": "41%",
"percentSocial": "61%"
},
{
"name": "school2",
"district": "district2",
"crest": "",
"location": "",
"percentEnglish": "2%",
"percentMath": "22%",
"percentScience": "42%",
"percentSocial": "62%"
}];
<div class="widget high-school">
<div class="widget__info">
<p class="widget__category">High school</p>
<p class="widget__title">Missouri Assessment Program standouts</p>
</div>
<div class="widget__buttons">
<p class="widget__rank">Rank by:</p>
<button class="btn btn-english is-selected">English</button>
<button class="btn btn-math">Math</button>
<button class="btn btn-science">Science</button>
<button class="btn btn-social">Social Studies</button>
</div>
<div class="wrapper">
<div class="schools">
<div class="school" data-id="1">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="2">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="3">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="4">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="5">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="6">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="7">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="8">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="9">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="10">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="11">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="12">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="13">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="14">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="15">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="16">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="17">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="18">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="19">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="20">
<img src="http://placehold.it/45x45" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
</div><!-- schools -->
</div>