getJSON calling format to servlet problem

Question

Hello I am using Jquery getJSON to send a query parameter to servlet. The servlet URL works by itself: http://localhost:8080/pgViking/recentUploads?conID=2

It gives the following output:

{reports:[{filename:"CSVFile_2010-06-16T11_54_53.csv"},
        {filename:"CSVFile_2010-06-16T11_54_53.csv"}, <br />
        {filename:"PRJ20142_05_10_2008.zip"}]}

However, I cannot get a proper response from jQuery. Here is code for it:

$(document).ready(function(){

      $("#cons").change(function(){
            var selected = $("#cons option:selected");
            // getJSON("servlet Name", Selected Value  2, 3, function to show result, callback function
            $.getJSON("recentUploads?conID=", selected.val(), function(data){
                $("#reports").contents().remove();
                    $.each(data.reports, function(index,rpt){
                    // add items to List box
                    $("#reports").append("<option>" + rpt.filename + "</option");
                    } //end function
                    ); //end of each

            }); // getJSON
        }); // change
     });

the html part:

        <select Name="eCons" size="1"  id="cons">
                <option value="select consultant">Select Consultant</option>
                <option value="4">A</option>
                <option value ="2">B</option>
                <option value="3">Br</option>
                <option value ="21">D</option>
                <option value="20">G</option>
                <option value="24">T</option>
        </select>
        <br />
        <br />
        <select id="reports" style ="width:200px">
        </select>

When I debug it in firebug I see that I have incorrect URL but I am not sure if it's the only problem:
url="recentUploads?conID=&3"

Any help it would be appreciated, Thanks,

I think you meant `$(data.reports).each(function())` – Kevin Peno Apr 08 '11 at 21:27 — Kevin Peno, Apr 08 '11 at 21:27

score 2 · Answer 1 · edited May 23 '17 at 12:19

$("#reports").append("<option>" + rpt.filename + "</option");

This is invalid. The closing tag > is not only missing, but this also won't create a real HTML element at all. Use $("<option>") to let jQuery create a real HTML <option> element.

$("#reports").append($("<option>").text(rpt.filename));

I'd also suggest to get hold of $("#reports") as a var before the loop, that's a tad more efficient.

You can find more examples in this answer.

score 2 · Answer 2 · answered Apr 08 '11 at 21:54

the getJSON call expects valid JSON (valid JSON has quotes around the keys and values, with the only exception being values that are numbers. The output of your servlet should look like this:

    {
        "reports": [
            {
                "filename": "CSVFile_2010-06-16T11_54_53.csv" 
            },
            {
                "filename": "CSVFile_2010-06-16T11_54_53.csv" 
            },
            {
                " filename": "PRJ20142_05_10_2008.zip" 
            } 


  ]

}

Otherwise, you can use the jQuery ajax call, giving the dataType attribute a value of "text" and using this code in the success function:

var myObject = eval('(' + myJSONtext + ')')

score 1 · Answer 3 · answered Apr 08 '11 at 20:23

Maybe:

        $.getJSON("recentUploads", { 'conID': selected.val()}, function(data){
           $("#reports").contents().remove();

http://api.jquery.com/jQuery.getJSON/

Parameters are: url, data (map or string), callback.

This is way an ampersand (&) is used to join your url + paramenter passed as string (3). As result you have: recentUploaded?conID=&3

El' · Accepted Answer · 2011-04-08T21:22:06.783

1

you can't use jQuery.each function in this way. http://api.jquery.com/each/

                for(i in data.reports){
                // add items to List box
                $("#reports").append("<option>" + data.reports[i].filename + "</option");
                ); //end of loop

to remove & use: $.getJSON("recentUploads?conID="+selected.val(), function(data){

or:

$.getJSON("recentUploads",{conID:selected.val()}, function(data){

edited Apr 08 '11 at 21:22

answered Apr 08 '11 at 20:34

El'

401
7
19

Where does it say you cannot use `$.each` in this way on that page? I use it like this often with great success, minus the typo I meantioned above. – Kevin Peno Apr 08 '11 at 21:25
Description: Iterate over a **jQuery object**, executing a function for each matched element. `.each( function(index, Element) )` – El' Apr 08 '11 at 21:27
You realize that a jquery object is more than DOM nodes right? See: [jQuery Object](http://api.jquery.com/jQuery/) – Kevin Peno Apr 08 '11 at 21:29
yeah you can. This usage is out of api – El' Apr 08 '11 at 21:35
I think both loops are valid. EACH and FOR. In order to use FOR loop the element should not have any null values. – Greener Apr 11 '11 at 13:46

getJSON calling format to servlet problem

4 Answers4