Looping over objects in array, display data from JSON
Question
Objective
I'm looking to loop over objects in an array so that each school using
html()has their name, district and percentages in english, math, science and social studies reflected from the data inschools.jsProblem: Right now, I'm only getting the last school in the array
Is it possible to do this without a
data-id? attached to each of the schools or is that actually necessary to identify which school is which?
scripts.js
// 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
}
school.js (There are 20 schools in total)
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%"
}];
index.html
<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>
3 answers
solution1
2 ACCPTED 2016-09-28 14:33:19
The problem is by using a class selector, many elements are selected. When you use .html() it does not know which element you want to target.
You can solve this easily by using .eq() to target a specific element by index - the same index as you're using in the json array.
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%" }]; for(var i = 0; i < schools.length; i++) { // Schools $(".school__name").eq(i).html(schools[i].name); // Name $(".school__district").eq(i).html(schools[i].district); // District }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> </div><!-- schools --> </div>
solution2
0 2016-09-28 14:16:20
You have to make some html template in javascript and concatenate there your changeable data and append to parent element on each time of itaration
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%" }]; // Generate numbers from 1 through 20 for(var i = 0; i < schools.length; i++) { var schoolID = i console.log(schoolID); // Schools var school = $(".school__details"); school.append( '<div class="school__name">'+schools[schoolID].name+'</div>'+ '<div class="school__district">'+schools[schoolID].district+'</div>'+ '<hr />' ) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> <div class="school__percentage">-%</div> </div> <!-- school --> </div> </div>
Parsing JSON objects for HTML table someone has already asked that kind of question
solution3
0 2016-09-28 14:20:20
Your javascript is replacing the HTML in the same element for each school in your loop - that is why you only see the last school. You would need to create a new set of HTML elements for each school (clone & append would help there) to prevent overwriting the previous school.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Looping over an array objects to get and display values
Looping over data to create an array of objects
Looping over array of objects
Not to display the ID (title & value) while looping over json data array dynamically
Looping over JSON key objects that doesn't have array
Looping over array of objects in JavaScript
Looping over an array of objects with mustache
Looping over array with nested objects
Looping over array of arrays of objects
Looping over objects in an array in javascript
Related Tags