0

hi, so im trying to get the course names and teachers printed from the JSON file and having trouble linking it to the drop down please help :)

html code

                <!DOCTYPE html>
                <html lang="en">
                <head>
                <meta charset="utf-8">
                <title>Course Info</title>
                </head>
                <body>
                <h1>Course Information Search</h1>
                <form action="" method="GET">
                <select name="course" id="course">
                    <option value="420-121">420-121</option>
                    <option value="420-122">420-122</option>
                    <option value="420-123">420-123</option>
                    <option value="420-221">420-221</option>
                    <option value="420-222">420-222</option>
                    <option value="420-223">420-223</option>
                    <option value="420-224">420-224</option>
                </select>
                Select a course to see the course name and teacher assigned<br><br>
                <input type="button" id="go" value="go!">

                </form>
                <br><br>
                <div id="courseInfo"></div>
                 <script src="jquery-1.11.2.js" type="text/javascript"></script>
                     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
                 <script type="text/javascript" src="jquery2.js"> </script>    

                </body>
                </html>

jquery

$.getJSON('course.json', function(course) {
        var output="<ul>";
        for (var i in course.courses) {
            output+="<li>" + course.courses[i].courseNumber + "  Course Name: " + course.courses[i].courseName + "  Teacher: " + course.courses[i].teacher+"</li>";
        }

        output+="</ul>";
        document.getElementById("courseInfo").innerHTML=output;
  });

JSON file

{"courses":[

{"class": {
            "courseNumber":"420-123",
            "courseName":"Web Interface Design",
            "teacher": "Jennifer Liutec"

        }
    },
{"class": {
        {
           "courseNumber":"420-121",
            "courseName":"Computer Fundamentals",
            "teacher": "Amin Ranj Bar"

        }
    },

{"class": {
    {
           "courseNumber":"420-122",
            "courseName":"Introduction to Programming",
            "teacher": "Samia Ramadan"

        }
    },

{"class": {
        {
            "courseNumber":"420-221",
            "courseName":"Programming with Java",
            "teacher": "Samia Ramadan"

        }
    },

{"class": {
        {
           "courseNumber":"420-224",
            "courseName":"Configuring and Maintaining Computers",
            "teacher": "Samia Ramadan"

        }
    },

{"class": {
        {
           "courseNumber":"420-222",
            "courseName":"Web Site Planning and Implementation",
            "teacher": "Jennifer Liutec"

        }
    },
{"class": {
        {
           "courseNumber":"420-223",
            "courseName":"Operating Systems and Scripting",
            "teacher": "Soumaya Chaffar"

        }
]}

Edited by chichi9

2
Contributors
1
Reply
15
Views
2 Years
Discussion Span
Last Post by mrsixcount
0

You haven't linked an event to your go button.

$(document).ready(function() {
    $("#go").on("click",function(){
        //call getJSON function
    });
});

Also your getJSON function will return a list with all the teachers for all the courses versus just getting the one selected.

You might want to add an if to check that the courseNumber matches the value of your select.

if (course.courses[i].courseNumber == $("#course").val()){
    //add the li to your ul list
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.