CODEWITHSUNDEEP
phpjqueryjson
David
David

Reputation: 317

How to put my JSON info into a jQuery Array

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);
        }

Upvotes: 0

Views: 833

Answers (2)

T9b
T9b

Reputation: 3502

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.

Upvotes: 1

Darragh Enright
Darragh Enright

Reputation: 14136

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 :)

Upvotes: 1

Related Questions