Question

我正在尝试将我的javascript输出到HTML文件中。但是，我不是很熟悉javascript，也不是for循环，但我知道我必须使用它来输出信息。我的问题是，如何将for循环合并到我的代码中以使学校部分将所有信息输出到HTML中的该部分，并将在线部分输出到HTML中的在线部分？这是我的代码：

//教育信息

var education = {


"schools" : [
    {
        "name" : "John Brown University",
        "city" : "Siloam Springs, AR",
        "major" : ["Graphic Design"]
    },

    {
        "name" : "Shelton State Community College",
        "city" : "Tuscaloosa, AL",
        "degree" : "Associates",
        "major" : "Culinary Arts"
    }],


"online" : {
        "school" : "Udacity",
        "title" : "NanoDegree Front End Web Developer",
        "dates" : "Feb. 4 2016 - present",
        "url" : "https://www.udacity.com",
    }
};

//教育追加

education.display = function(){

for (var school in education.schools) {
$("#education").append(HTMLschoolStart);
 var name = HTMLschoolName.replace("%data%", education.schools[school].name);
 var city = HTMLschoolLocation.replace("%data%", education.schools[school].city);
 var major = HTMLschoolMajor.replace("%data%",education.schools[school].major);
$(".education-entry:last").append(name, city, major, degree);
}

$("#education").append(HTMLonlineClasses);
for (var course in education.online){
 var title = HTMLonlineTitle.replace("%data%", education.online[course].title);
 var school = HTMLonlineSchool.replace("%data%", education.online[course].school);
 var dates = HTMLonlineDates.replace("%data%", education.online[course].dates);
 var url = HTMLonlineURL.replace("%data%", education.online[course].url);
 $(".education-entry:last").append(title, school, dates, url);
 };

Answer 1

如果您尝试使用JSON中的数据填充HTML，则可以尝试以下操作：

对于＆＃34;学校＆＃34;你需要循环：

//Loop Schools "Object"
for (var school in education.schools) {
 var name = education.schools[school].name;
 var city = education.schools[school].city;
 var major = education.schools[school].major;
$("#schools").append(name + city + major);
}

对于＆＃34; online＆＃34;，因为它是直接定义的对象，您只需使用点表示法获取值：

//Get Online "Object"
 var title = education.online.title;
 var school = education.online.school;
 var dates = education.online.dates;
 var url = education.online.url;
 $("#online").append(title, school, dates, url);

https://jsfiddle.net/ce7b8fwf/3/

Answer 2

首先，概括源数据：

var education = {
    "schools" : [
        {
                "name" : "John Brown University",
                "city" : "Siloam Springs, AR",
                "major" : "Graphic Design"
        },

        {
                "name" : "Shelton State Community College",
                "city" : "Tuscaloosa, AL",
                "degree" : "Associates",
                "major" : "Culinary Arts"
        }
    ],


    "online" : [
        {
                "school" : "Udacity",
                "title" : "NanoDegree Front End Web Developer",
                "dates" : "Feb. 4 2016 - present",
                "url" : "https://www.udacity.com",
        }
    ],

其次，改进模板：

function template(code) {
    return function (data) {
        return code.replace(/\{\%([^\}\%]+)\%\}/g, function(m, property) { 
            return data[property] || '{%' + property + '%}'; 
        });
    };
}

...

var education = {
...

    templates: {
        school: template('\
        <div class="education-entry"> \
            <a href="#">{%name%} -- {%degree%}</a> \
            <div class="location-text">{%city%}</div> \
            <em><br>Major: {%major%}</em> \
        </div>'
        ),
        online: template('\
        <div class="education-entry-online"> \
            <a href="{%url%}">{%school%} - {%title%}</a> \
            <div class="date-text">{%dates%}</div> \
        </div>'
        )
    },

第三，重构显示功能：

    display: function() {
        var container = $("#education");

        for (var i in this.schools) {
            var school = this.schools[i];
            container.append(this.templates.school(school));
        }

        for (var i in this.online){
            var course = this.online[i];
            container.append(this.templates.online(course));
        };

    }

并合并：

function template(code) {
    return function (data) {
        return code.replace(/\{\%([^\}\%]+)\%\}/g, function(m, property) { 
            return data[property] || '{%' + property + '%}'; 
        });
    };
}

var education = {
    "schools" : [
        {
                "name" : "John Brown University",
                "city" : "Siloam Springs, AR",
                "major" : "Graphic Design"
        },

        {
                "name" : "Shelton State Community College",
                "city" : "Tuscaloosa, AL",
                "degree" : "Associates",
                "major" : "Culinary Arts"
        }
    ],


    "online" : [
        {
                "school" : "Udacity",
                "title" : "NanoDegree Front End Web Developer",
                "dates" : "Feb. 4 2016 - present",
                "url" : "https://www.udacity.com",
        }
    ],

    templates: {
        school: template('\
        <div class="education-entry"> \
            <a href="#">{%name%} -- {%degree%}</a> \
            <div class="location-text">{%city%}</div> \
            <em><br>Major: {%major%}</em> \
        </div>'
        ),
        online: template('\
        <div class="education-entry-online"> \
            <a href="{%url%}">{%school%} - {%title%}</a> \
            <div class="date-text">{%dates%}</div> \
        </div>'
        )
    },

    display: function() {
        var container = $("#education");

        for (var i in this.schools) {
            var school = this.schools[i];
            container.append(this.templates.school(school));
        }

        for (var i in this.online){
            var course = this.online[i];
            container.append(this.templates.online(course));
        };

    }
};

education.display();

提示：当然，您可以使用education.templates = { ...}和education.display = function { ...}代替直接定义。

我如何使用＆＃34; for循环＆＃34;在我的代码？

2 个答案: