How to put my JSON info into a jQuery Array

Question

I have a project where I've created JSON data for Project Prices/Prices I've gotten this far and pretty much ran into a wall, any help at all would help! I've checked all over the web and on jQuery.getJSON but I wound up getting super confused.

$data = mysql_query("SELECT * FROM xxx") 
 or die(mysql_error()); 

    $arr = array();
    $rs = mysql_query("SELECT product, price FROM products");
    while($obj = mysql_fetch_object($rs)) {
    $arr[] = $obj;
    }
    echo '{"products":'.json_encode($arr).'}';

I need to get the product price and product name into this jquery script

        $(document).ready(function() {
                /*** CONSTANTS ***/
                var KEY = 0;
                var VALUE = 1;
                /*** DEFINE DATA SETS ***/
                var POINTS = [ ["$productA", $PRICE ], ["$productB", $PRICE], ["$productC", $PRICE], ["$productD", $PRICE], ["$productE", $PRICE], ["$productF", $PRICE] ];
                var SHIPPING_COSTS = [ ["Pickup", 0], ["Next Day Delivery", 30], ["Same Day Print/Same Day Delivery", 65] ];

                for (var i = 0; i < POINTS.length; i++) {
                    $("#quantity").append("<option value='" + POINTS[i][VALUE] + "'>" + POINTS[i][KEY] + "</option>");
                }
                for (var i = 0; i < SHIPPING_COSTS.length; i++) {
                    $("#shipping").append("<option value='" + SHIPPING_COSTS[i][VALUE] + "'>" + SHIPPING_COSTS[i][KEY] + "</option>");
                }

                $("select.autoUpdatePrice, input.autoUpdatePrice").bind("mousedown click change", function(event) {
                    Calculate();
                });
                Calculate();    
            });


        function Calculate() {
            var net = parseFloat($("#quantity").val());
            /* Calculate the magical # by adding the form fields*/
            var designFee = $("#abcDesignFee").attr("checked") ? $("#abcDesignFee").val() : 0.0;
            var proofFee = $("#abcProofFee").attr("checked") ? $("#abcProofFee").val() : 0.0;
            var MyPrice;
            MyPrice = parseFloat( parseFloat(proofFee) + parseFloat(designFee) + net + parseFloat($("#shipping").val()));
            $("#DumpHere").html("Your Price: $" + formatNumber(MyPrice));
            $("#abcName").val($("#quantity").find(":selected").text() + " " + ProductNamePlural);
            $("#abcPrice").val(MyPrice);
        }

Don't put client/server code, or different languages, in the same code block. — mikerobi, Jun 29 '11 at 18:31
mike, thanks -- I only posted them together to give an idea of how I was pulling my JSON array + how I needed to feed my jQuery Script — David, Jun 29 '11 at 18:37

score 1 · Accepted Answer · answered Jun 29 '11 at 19:37

In your PHP script, can you just json_encode() your array of objects without wrapping it in the string? And instead encode the JSON object like so:

<?php

// your script ...

echo json_encode($arr);

This creates an array of JSON encoded objects:

[{"name":"item 1","price":4.99},{"name":"item 2","price":9.99}]

Make an AJAX request in your JS to query your PHP script, and use jQuery's $.each() and $.parseJSON() methods to iterate over the returned JSON data:

$.post('get_products.php', { data: foo }, function(json) {
    $.each($.parseJSON(json), function(key, product) {
        console.log(product.name + ' ' + product.price);
    });
});

Hope this helps :)

thanks for the tip, I think I'm getting on the right direction, thank you -- now to get the prices in the fields, lol. — David, Jun 29 '11 at 20:14

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

When I was learning - I had exactly the same problem - but it got answered here

What I didn't realise at the time was that you can use object notation (which is the ON of json) to access the data you sent.

If you look at my question and the answer I selected, once you have sent the data back to javascriot you can access it easily. In my example it would be as straitforward as using data.catagory_desc in javascript to find the data that was encoded.

How to put my JSON info into a jQuery Array

2 Answers2