Andrew Nguyen Andrew Nguyen - 2 months ago 6
Javascript Question

Looping over objects in array, display data from JSON

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 in
    schools.js

  • Problem: 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>

Answer

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>

Comments