【问题标题】：Looping over objects in array, display data from JSON循环遍历数组中的对象，显示来自 JSON 的数据
【发布时间】：2017-02-06 13:57:13
【问题描述】：

目标

我希望循环遍历数组中的对象，以便使用 html() 的每所学校都可以从 schools.js 中的数据中反映出他们的名称、地区和英语、数学、科学和社会研究的百分比
问题：现在，我只得到数组中的最后一所学校
没有data-id 是否可以做到这一点？附加到每所学校还是实际上有必要确定哪所学校是哪所学校？

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（一共20所学校）

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>

【问题讨论】：

请显示 html，您是否尝试设置或获取数据？
@depperm 在 HTML 中添加
你想如何将json数据与现有的html链接起来？目前您正在使用一个匹配许多元素的类选择器，但调用 .html() 将更新它们。
jsfiddle.net/yx9mtnv8/1

标签： javascript jquery arrays for-loop foreach

【解决方案1】：

问题是通过使用类选择器，选择了许多元素。当您使用.html() 时，它不知道您要定位哪个元素。

您可以通过使用.eq() 按索引定位特定元素来轻松解决此问题 - 与您在 json 数组中使用的索引相同。

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>

【讨论】：

【解决方案2】：

您的 javascript 正在为循环中的每所学校替换同一元素中的 HTML - 这就是为什么您只看到最后一所学校的原因。您需要为每所学校创建一组新的 HTML 元素（克隆和追加会有所帮助），以防止覆盖以前的学校。

【讨论】：

【解决方案3】：

您必须在 javascript 中制作一些 html 模板，并在其中连接您的可变数据并在每次迭代时附加到父元素

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 已经有人问过这种问题了

【讨论】：