Member Avatar for chichi9

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
  • 194 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mrsixcount
Member Avatar for mrsixcount

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
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.