Dynamic Table with JSON data

Question

I have a table I'm creating with jquery and I'm having trouble getting object name. I can get the value and display it fine but for some reason the object name/label isn't being returned.

My HTML

$('.compare-link a').on('click', function(e){
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: "http://localhost:8888/wp-content/themes/wp-foundation/load-products.php",
            dataType: 'json',
            data: {permalink: $(this).data('device-compare')},
            beforeSend: function() {
                $('.compare-devices').html("<div class='loader'><img src=" + root + "/wp-content/themes/wp-foundation/images/ajax-loader.gif /></div>");
            },
            success: function(data) {
                var table = $("<table>").attr('id', 'compare').attr('class', 'device-compare'),
                cont = $('<div class="row container"><div class="twelve columns text"><h2>Compare Phones &amp; Devices</h2></div><div class="twelve columns price-table">'),
                contEnd = $('</div></div>');
                $('.compare-devices').append(cont);
                $('.price-table').prepend(table);
                for (var i in data) {
                     var tr="<tr>";
                     var td1="<td>"+data[i]+"</td>"; //this should be the json object/label
                     var td2="<td>"+data[i]["device_retail_price"]+"</td>";
                    $('#compare').append(tr+td1+td2);
                }
                $('.compare-devices').prepend(contEnd);
            }
        });
    });

My PHP

<?php

$compare = $_GET['permalink'];

$link = mysql_pconnect("localhost", "user", "pass") or die("Could not connect");
mysql_select_db("dbname") or die("Could not select database");

$arr = array();

$query = mysql_query("SELECT columns FROM table WHERE permalink ='" . $compare . "'");

while($obj = mysql_fetch_assoc($query)) 
{
$arr[] = $obj;
}

foreach ($arr as $innerArray) {
foreach ($innerArray as $key => $value) {
    $arr[$key][] = $value;
}
}

echo '{"devices":'. json_encode($arr). '}';

?>

My JSON Response

devices: {
0: {
    name: Samsung Galaxy S4,
    device_manufacturer: Samsung,
    device_model: Galaxy S4,
    …
    },
    …
}
0: {
    name: Samsung Galaxy S4,
    device_manufacturer: Samsung,
    device_model: Galaxy S4,
    …
} 
device_2_yr_contract_price: [249.99]
device_charging_port_type: []
device_external_storage: [Up to 64GB MicroSD]
device_front_facing_camera: [2MP]
device_hac_rating: [M3]
device_internal_storage: [16GB]
device_manufacturer: [Samsung]
device_model: [Galaxy S4]
device_os_type: [Android 4.2.2(Jelly Bean)]
device_processor: [1.9GHz, Quad - core Processor]
device_ram: [2 GB]
device_rear_facing_camera: [13MP w / LED Flash]
device_retail_price: [719.99]
device_screen_size: [null]
device_wi_fi_hotspot: [1]
name: [Samsung Galaxy S4]

So where am I going wrong with the json object label? Any help would be appreciated.

Thanks

that returns the value of name. I need the actual object label, "name" itself or "Device_ram", etc...sorry I wasn't more clear — ethikz, Oct 28 '13 at 17:55
Possible duplicate http://stackoverflow.com/questions/8430336/get-keys-of-json-object-in-javascript — Hackerman, Oct 28 '13 at 18:01

Snowburnt · Accepted Answer · 2013-10-28T18:14:21.150

1

print out just i instead of data[i].

here's a fiddle sample: http://jsfiddle.net/snowburnt/FaAWj/

for what it looks like you want to do you can do this:

for(i in data.devices){
    alert (i);//should be name, then device_manufacturer, etc
    alert(data.devices[i]); //should be value
}

edited Oct 28 '13 at 18:14

answered Oct 28 '13 at 18:03

Snowburnt

6,523
7
30
43

my array must be wrong because when I print i it returns "devices". Which I believe it is wrong because each column should be inside of devices if i'm not mistaken – ethikz Oct 28 '13 at 18:10
not quite, your JSON object starts off with an array of devices. so it would look like data.devices.name, data.devices.device_manufacturer, etc. if you want to list out each of the devices I'll modify my answer – Snowburnt Oct 28 '13 at 18:12
Updated my answer, basically, you should be doing the for in loop to the data.devices (or data[0] object) rather than data itself. With your sample it looks like the first one would be devices, the second would be, device_2_yr_contract_price, the third device_charging_port_type – Snowburnt Oct 28 '13 at 18:16
perfect....thank you, now I just have to get rid of the first one, 0 object object so it doesn't display :) – ethikz Oct 28 '13 at 18:17

Dynamic Table with JSON data

1 Answers1