JSON: encode, parse, render table using Javascript > jsfiddle example not working

Question

I have a jsfiddle here, which I'm using to get my concept working.

It's likely that the issues I'm having are caused by the JSON, I'll share the code I use to generate that.

First I do a query:

$sth->execute();

$last_sup   = 0;
$i          = 0;
$reorderArr = array();
$prodsArr   = array();
$si         = 0;

while ($row = $sth->fetchObject()) {

    // If new supplier.
    if ($last_sup !== $row->sup_id) {

        $last_sup = $row->sup_id;

        // If not first iteration.
        if ($i !== 0) {

            // Append $prodsArr to current $supArr
            $supArr['prods'] = (array)$prodsArr;

            // empty $prodsArr ready for next sup.
            $prodsArr = array();

            // Append $supArr to previous $reorderArr
            $reorderArr[$si] = (array)$supArr;

            $si++;
        }

        // Create entries for new supplier to $supArr
        $supArr = array(
            "supID"                 => $row->sup_id,
            "supName"               => $row->supplier_comp_name
        );
    }

    // Build array of products for this supplier.
    $prodsArr[] = array(
        "pID"                   => $row->prod_id,
        "sku"                   => $row->sku,
        "pName"                 => $row->prod_name,
        "cat"                   => $row->category_name,
        "desc"                  => $row->prod_desc,
        "stock_level"           => $row->stock_level,
        "reOrdLev"              => $row->reorder_level,
        "reOrdQty"              => $row->reorder_qty,
        "vat_exempt"            => $row->vat_exempt,
        "lastorderdate"         => $row->lastorderdate,
        "lastorderqty"          => $row->lastorderqty,
        "qty_in_outer"          => $row->qty_in_outer,
        "cost_per_outer"        => $row->cost_per_outer
    );

    $i++;

}

// Process the very last loop (since it's normally processed
// at the start of the next loop.

// Append $prodsArr to current $supArr
$supArr[] = (array)$prodsArr;

// Append $supArr to previous $reorderArr
$reorderArr[$si] = (array)$supArr;


return $reorderArr;

Then I double json_encode it (because the tutorial I followed told me to) and parse it with Jquery like so:

var data = $.parseJSON(<? print json_encode(json_encode($reorderArr));?>);

and I include the line above between script tags on my page and send it to my function for processing it using the line below:

displayReorderList(data);

Here is the displayReorderList() function in it's current state:

function displayReorderList($data) {

    var table = document.createElement('table');

    /**
     * Set up supplier group.
     * 1 loop per group.
     */
    for(var i=0; i < data.length; i++) {

        var tr = document.createElement('tr');  
        var td1 = document.createElement('td');

        // Need to put the Supplier name here in a colspan cell.
        var text1 = document.createTextNode(data[i].supName);
        td1.appendChild(text1);
        tr.appendChild(td1);
        table.appendChild(tr);

        /**
         * Setup Product Group.
         * 1 loop per product.
         */
        for(var j = 0; j < data[i].prods.length; j++) {

            var tr = document.createElement('tr');  
            var td1 = document.createElement('td');

            var text1 = document.createTextNode(data[i].prods[j].sku);
            td1.appendChild(text1);
            tr.appendChild(td1);
            table.appendChild(tr);

        }
    }
    document.body.appendChild(table);

To give an easy overview of the data structure, here is a print_r($reorderArr)

I'm attempting to end up with a lists of products which have reached their reorder levels, grouped by supplier but the the script seems to be stalling at for(var j = 0; j < data[i].prods.length; j++) { but only after iterating past that line several times. It seems like the length of data[i].prods is being incorrectly reported, maybe because the JSON is malformed?

Please see the jsfiddle.

UPDATE
I've updated as follows, after @Yogesh pointed me in the right direction.

I have changed $supArr[] = (array)$prodsArr; to $supArr[prods] = (array)$prodsArr; in the server-side array construction.

After doing that, it all worked nicely. See jsfiddle here with the correctly generated data.

Yogesh Suthar · Accepted Answer · 2013-03-19 06:23:35Z

2

your array's third element doesn't contains prods array see here

[2] => Array
    (
        [supID] => 12
        [supName] => Trade Plumbing Supplies Inc.
        [0] => Array
         ^// its 0 not prods

[1] => Array
    (
        [supID] => 9
        [supName] => Prime Plumbing Inc.
        [prods] => Array
           ^// its prods

and because of that the length of data[i].prods is being incorrectly reported.

You have if condition here and because of that prods is not available for all array

if ($i !== 0) {

        // Append $prodsArr to current $supArr
        $supArr['prods'] = (array)$prodsArr;

edited Mar 19, 2013 at 6:23

answered Mar 19, 2013 at 6:03

Yogesh Suthar

30.5k18 gold badges75 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter White Over a year ago

Well done for spotting that, although actually, the intention was to use [prods] rather than numeric index, so I need to (a) figure out why it's not consistent and (b) make it always use [prods].

Collectives™ on Stack Overflow

JSON: encode, parse, render table using Javascript > jsfiddle example not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related