JSON in jQuery each

Question

My JS skills are pretty poor, and I'm trying to hack this thing together from tutorials. With that said, I can't figure out why this isn't working.

How do I pass and reference the JSON object in the each loop?

<script type="text/javascript">

var jsonData = '["{ staffid :41, firstname :Joe, lastname :Blow}", "{ staffid :42, firstname :Lucy, lastname :Goosey}"]';
var jsonParsed = JSON.parse(jsonData);

jQuery(document).ready(function(){
    jQuery.each(jsonParsed, function(index, value){
        jQuery.ajax({
        type:'get',
        async:false,
        url: 'genpdf.php?staffid=' + value.staffid,
        success: function (data) {
            $("#status").append("<li>Successfully generated PDF for " +     value.firstname + " " + value.lastname + " (StaffID: " + value.staffid + ")</li>");
        },
        error: function (xhr, textStatus, errorThrown){
            $("#status").append("<li>PDF genetration failed for " + value.firstname + " " + value.lastname + " (StaffID: " + value.staffid + ") with status (" + textStatus + ") and error (" + errorThrown + ")</li>");
        }
    })
});

Answer 1

Thanks everyone. I've upvoted all of you, because you were all correct. I got it working eventually, though probably not optimally.

Some of you mentioned async:false being a bad idea. I'm well aware of that but if I set it to true only the first AJAX call is actually successful and the rest get a 401 response!

The genpdf.php script calls a free PHP PDF library called FPDF, which seems to have some idiosyncrasies. Ultimately, the only way I could find to get it to output multiple PDF files was to call it multiple times.

In the end, this is what I did (involved installing the mysqlnd driver for PHP so I could use fetch_all which made it cleaner):

if ($stmt = $mysqli->prepare("SELECT staffid, firstname, lastname FROM Staff")) { // get staffid for user if it exists
    $stmt->execute();
    $result = $stmt->get_result();
    $resultArray = $result->fetch_all(MYSQLI_ASSOC);
    $stmt->free_result();
    $stmt->close();
} else {
    die("Prepared Statement Error: $mysqli->error");
}
$resultJSON = json_encode($resultArray);
?>

<div>
<ul id="status"></ul>
</div>

<script type="text/javascript">

var jsonData = <?=$resultJSON?>;

jQuery(document).ready(function(){
    jQuery.each(jsonData, function(index, value){
        jQuery.ajax({
        type:'get',
        async:false,
        url: 'genpdf.php?staffid=' + value.staffid,
        success: function (data) {
            $("#status").append("<li>Successfully generated PDF for " + value.firstname + " " + value.lastname + " (StaffID: " + value.staffid + ")</li>");
            },
        error: function (xhr, textStatus, errorThrown){
            $("#status").append("<li>PDF generation failed for " + value.firstname + " " + value.lastname + " (StaffID: " + value.staffid + ") with status (" + textStatus + ") and error (" + errorThrown + ")</li>");
            }
        })
    });
});
</script>

Answer 2

As others have noted, I believe the main source of your trouble is the formatting of the JSON. I have modified your code slightly and set it up on jsFiddle here.

HTML

<ul id="list"></ul>

JavaScript

var jsonData = '[{"staffid": 41, "firstname": "Joe", "lastname": "Blow"}, {"staffid": 42, "firstname": "Lucy", "lastname": "Goosey"}]';
console.log(jsonData);
var jsonParsed = JSON.parse(jsonData);

jQuery(document).ready(function(){
    var $list = $("ul#list");
    jQuery.each(jsonParsed, function(index, value) {
        console.log(index,value);
        $list.append("<li>index = " + index +
                     ", staffid = " + value.staffid +
                     ", firstname = " + value.firstname +
                     ", lastname = " + value.lastname +
                     "</li>");
        /* 
        jQuery.ajax({
            type: 'get',
            async: false,
            url: 'genpdf.php?staffid=' + value.staffid,
            success: function (data) {
                $("#status").append("<li>Successfully generated PDF for " +     value.firstname + " " + value.lastname + " (StaffID: " + value.staffid + ")</li>");
            },
            error: function (xhr, textStatus, errorThrown){
                $("#status").append("<li>PDF genetration failed for " + value.firstname + " " + value.lastname + " (StaffID: " + value.staffid + ") with status (" + textStatus + ") and error (" + errorThrown + ")</li>");
            }
        });
        */
    });
});

Answer 3

you are preparing wrong json string. It should be

var jsonData = '[{ "staffid" :41, "firstname":"Joe", "lastname":"Blow"}, { "staffid":42, "firstname":"Lucy", "lastname":"Goosey"}]';

And if you preparing json string on javascript then you should direct use array object for eg.

var jsonData = [{ "staffid" :41, "firstname":"Joe", "lastname":"Blow"}, { "staffid":42, "firstname":"Lucy", "lastname":"Goosey"}];

then you don't need to parse it.

Answer 4

var jsonData = '["{ staffid :41, firstname :Joe, lastname :Blow}", "{ staffid :42, firstname :Lucy, lastname :Goosey}"]'

This JSON string does not contain what you think it does. When parsed, you will have an array of 2 objects. If you wanted an array of objects, it should look like this:

var jsonData = '[{"staffid": 41, "firstname": "Joe", "lastname": "Blow"}, {"staffid": 42, "firstname": "Lucy", "lastname": "Goosey"}]'

When you parse this, it should work as you expect.

Also, why do you even have a JSON string here in the first place? Why not use a JavaScript array/object literal.

var data = [{staffid: 41, firstname: "Joe", lastname: "Blow"}, {staffid: 42, firstname: "Lucy", lastname: "Goosey"}];

P.S. I highly suggest not using async:false. That will make the browser lock up until the AJAX call is done. You will not be able to interact with the page (and possibly the browser) until it's done. That's not great UX at all.