javascript - 循环数组中的对象，显示 JSON 数据

标签 javascript jquery arrays for-loop foreach

目标

  • 我希望循环遍历数组中的对象，以便每所使用 html() 的学校都有其名称、地区以及英语、数学、科学和社会研究中反射(reflect)的百分比schools.js

    • 中的数据

  • 问题:现在，我只获取数组中的最后一个学校

  • 是否可以在没有data-id的情况下执行此操作？附属于每所学校，或者实际上有必要确定哪所学校是哪所学校吗？

脚本.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() 时，它不知道您要定位哪个元素。

您可以使用 .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>

关于javascript - 循环数组中的对象，显示 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39750005/

上一篇：javascript - 使用 AJAX 和 PHP 附加加载 gif 文件上传

下一篇：javascript - Bootstrap 导航中的居中对齐导航项

相关文章：

javascript - angularJS:将重新排序列表与数据结构同步

javascript - 通过 knex 插入 faker 数据

javascript - 通过两个嵌套值过滤对象

arrays - 如何在Pascal中制作多行数组

javascript - 目标上一个输入字段

c# - ASP.NET MVC 3 - 创建仅用于返回的动态对象

javascript - JQuery 删除除匹配行之外的所有行

javascript - jQuery、JavaScript - 如何创建检查表单是否提交的函数

javascript - 使用 jQuery UI 对 Ember.js 项目进行排序后，使用 Ember Data 的 model.deleteRecord() 不起作用

c++ - 当创建所述类型的对象时，静态 (PASS_OBJECT<int>) 模板化数组会丢失数据吗？

©2024 IT工具网  联系我们