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
– depperm, Commented Sep 28, 2016 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
– Jamiec, Commented Sep 28, 2016 at 14:23

Jamiec · Accepted Answer · 2016-09-28 14:33:19Z

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>

Theo · Accepted Answer · 2016-09-28 14:20:20Z

0

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.

answered Sep 28, 2016 at 14:20

Theo

8856 silver badges16 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:33:15Z

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

Collectives™ on Stack Overflow

Looping over objects in array, display data from JSON

Objective

scripts.js

school.js (There are 20 schools in total)

index.html

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Objective

scripts.js

school.js (There are 20 schools in total)

index.html

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related