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 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>

show the html please and are you trying to set or get the data? — depperm, Sep 28 '16 at 14:14
how do you want to link up the json data with the existing html? currently youre using a class selector, which matches many elements, but calling `.html()` will update them all. — Jamiec, Sep 28 '16 at 14:23

score 2 · Accepted Answer · answered Sep 28 '16 at 14:33

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>

score 0 · Answer 2 · edited May 23 '17 at 12:33

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

score 0 · Answer 3 · answered Sep 28 '16 at 14: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.

Looping over objects in array, display data from JSON

Objective

scripts.js

school.js (There are 20 schools in total)

index.html

3 Answers3