Return json array from PHP to jQuery AJAX

Question

Im trying to do something experimental. i would want to search product in MySQL database by product name and retrieve price in 'price input', sell price in 'sellprice input'. example picture

Everything is ok, except retrieve fetch.php array as javascript variable to get price and sellprice input value. i tried to use json_encode in php file to get php array in javascript, still dosen't working. I don't have much knowledge about javascript. Probably I didn't coded properly thats why javascript not getting php array. Any kind of help would be appreciated. Thanks :)

index.htm

<html>
        <head>
            <script src="js/jquery.js"></script>
        </head>
        <body>
            <div class="productdetail">
                <table class="productdetail">
                    <th>Product</th>
                    <th>Price</th>
                    <th>Sell price</th>
                    <tr>
                        <td><input class='product' type='text' name='product' /></td>
                        <td><input class='price' type='text' name='price' /></td>
                        <td><input type='text' class='sellprice' name=''/></td>
                    </tr>
                </table>
    <div id="result"></div>
        </body>

    </html>
    <script>
    $(function(){

            $('.productdetail').delegate('.product,.price,.sellprice','keyup',function(){
                var tr = $(this).parent().parent().parent();
                var product = tr.find('.product').val();
                if(product != '')  
               {  
                    $.ajax({  
                         url:"fetch.php",  
                         method:"post",  
                         data:{product:product},  
                         dataType:"text",  
                         success:function(data)  
                         {  
                    console.log(price);
                    var price = jQuery.parseJSON(price);

                    console.log(sellprice);
                    var sellprice = jQuery.parseJSON(sellprice);

                    //var price = "test price";
                    //var sellprice = "test sell price";

                     tr.find('.price').val(price);
                     tr.find('.sellprice').val(sellprice);

                    $('#result').html(data);  
                         }  
                    });  
               } 

            }); 
        });     
    </script>

fetch.php

<?php

$product = strtolower($_POST["product"]);

require_once ('db.php');
$sql = "SELECT * FROM tbproduct WHERE product LIKE '$product'";

$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {        {


            $array = array(
                'price' => $row["price"],
                'sellprice' => $row["sellprice"],
                );
                echo json_encode($array);
        }

    }
} else {
    echo 'Data Not Found';
}

?>

if you use dataType: 'json' on the ajax, you don't need to use JSON.Parse — Phiter
– Phiter, Commented Dec 11, 2016 at 17:57
Part of the issue is that you are echoing multple json_encode results. Properly formatted json will require you to do that only once at the end. Json is expected to have a single parent node at the very top, be it an array or object containing all the children. Also as a side note, your sql is not using prepared statements and is taking the input directly from the request, which opens you up to sql injection attacks. That's bad, m'kay! — Taplar
– Taplar, Commented Dec 11, 2016 at 18:00
Unless I'm misreading that and the product is unique in the db, in which case it maybe should be an if rather than a while conditional. And your success method for your ajax is doing nothing with the returned data passed into it, which would be the result. If it is not parsed automatically, then you can parse it to get what you need. Just console.log(data) to see what you got there. — Taplar
– Taplar, Commented Dec 11, 2016 at 18:07

romeo · Accepted Answer · 2016-12-12 17:03:49Z

i got it. Working now :)

$(function(){

        $('.productdetail').delegate('.product,.price,.sellprice','keyup',function(){
            var tr = $(this).parent().parent().parent();
            var product = tr.find('.product').val();
            if(product != '')  
           {  
                $.ajax({  
                     url:"fetch.php",  
                     method:"post",  
                     data:{product:product},  
                     //dataType:"json",  
                     success:function(data)  
                     {  

                    var getarray = jQuery.parseJSON(data);
                    var price = getarray.price;
                    var sellprice = getarray.sellprice;

                 tr.find('.price').val(price);
                 tr.find('.sellprice').val(sellprice);

                //$('#result').html(data);  
                }

                });  
           } 

        }); 
    });

liontass · Accepted Answer · 2016-12-11 18:12:57Z

0

Try to replace the price argument in ajax with data eg

$.ajax({  
                         url:"fetch.php",  
                         method:"post",  
                         data:{product:product},  
                         dataType:"text",  
                         success:function(data)  
                         {  
                    console.log(data);
                    var price = jQuery.parseJSON(data);

Then console the data I think that the two arrays that you want is the data[0] and data[1]

answered Dec 11, 2016 at 18:12

liontass

74010 silver badges26 bronze badges

2 Comments

liontass Over a year ago

Can you show me the console output?With data then data[0] and the data[1]

romeo Over a year ago

"""$array = array( 'price' => $row["price"], 'sellprice' => $row["sellprice"], ); echo json_encode($array);""" output: {"price":"900","sellprice":"1000"}

Collectives™ on Stack Overflow

Return json array from PHP to jQuery AJAX

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related