How to Parse php json_decode data to Jquery Ajax request

Question

The current problem now is this, the below files are working perfectly well, but when using console.log(data), it prints out the result I wanted very well.

But what I want is to print out the result in a html tag (div) profoundly instead of console.log().

The Php File section

<?php

$transaction_id = $_POST['transaction_id'];//get the Transaction ID from Ajax request..

//get the full transaction details as an json from VoguePay
$json = file_get_contents('https://example.com/?v_transaction_id=' . $transaction_id . '&type=json');

$transaction=json_decode($json, true);

//header('Content-Type: application/json');
echo json_encode($transaction);

The Ajax Section...

            //clear the display section
            $("#id-input2").html('');
            var data="";
            //call the Ajax Request..
            $.ajax({
                url: "php/fetch_transaction_id.php",
                type: "POST",
                data: {transaction_id:transaction_id},
                dataType: "json",

                success: function (vp_response) {
                    $.each(vp_response, function(index, value) {

                        data=(index + ': ' + value);
                        console.log(data);
                    });

                    $('#searchID').val('Data Recieved!');
                },

            });

Here is the output for using console.log();:

cur: NGN
transaction_id: 5a3182d82a8c6
email: talk2awe2004@example.com
total_amount: 1016.7000
total: 1000
merchant_ref:
memo: MLM Bank Union Creation
status: Approved
date: 2017-12-13 20:49:26
method: MasterCard & Verve (Naira)
referrer: https://www.mlmbank.net/Leaders/create.html
total_credited_to_merchant: 1001.450000
extra_charges_by_merchant: 16.700000
charges_paid_by_merchant: 15.250000
fund_maturity: 2017-12-15
merchant_id: 3362-0054095
total_paid_by_buyer: 1000
process_duration: 0.000395

I want same using a html tag instead.

No no, edit your question to include the code. Comment code is very messy. — Unknown, Jan 13 '18 at 18:16

Alex Filatov · Accepted Answer · 2018-01-13T18:24:24.273

0

You can return your array in JSON format with application/json content-type

<?php

if(isset($_POST['transaction_id'])) {

   //get the full transaction details 
   $json = file_get_contents('https://example.com');

   //create new array to store our transaction
   $transaction = json_decode($json, true);

   // Here you can do something with $transaction

   // And return it in JSON format for ajax request
   header('Content-Type: application/json');

   echo json_encode($transaction);
}

After that you can get this json in ajax like this

<script>
$.get('transaction.php', {transaction_id: 'SOME ID'}, function(data) {
    console.log(data);
});
</script>

jQuery will parse data as javascript object because of content-type

edited Jan 13 '18 at 18:24

answered Jan 13 '18 at 18:23

Alex Filatov

36
5

Why `json_decode` if you are just going to `json_encode` after? – Eddie Jan 13 '18 at 18:24
@Eddie for example, if he wants to do something with $transaction data before send – Alex Filatov Jan 13 '18 at 18:25
OK... Thank you so much. Would try that out once I'm close to my laptop. – Audenna Jan 13 '18 at 18:46

Unknown · Answer 2 · 2018-01-13T23:00:10.453

0

If the link you reach out to has raw json, you can simply echo it out :

PHP

if (isset($_POST['transaction_id'])) 
{
    $TransactionId = $_POST['transaction_id'];

    echo file_get_contents('https://example.com');
}

You want to add the success event handler in your ajax call and then $.each through your response. :

*Note : Make sure you have dataType: 'json', this tells jquery to parse the json response.

Javascript :

$.ajax({
    type: 'POST',
    url: '/yourphpfile.php',
    data : {
        transaction_id: '0'
    },
    dataType: 'json',
    success : function(response) {
        $.each(response, function(key, value) {
            console.log(value.whatever);
        });
    }
});

Read more on accessing json values : jQuery Ajax: get specific object value

edited Jan 13 '18 at 23:00

answered Jan 13 '18 at 18:26

Unknown

769
2
7
17

The thing is... Actually, if I should use var_dump($transaction); only in php, I would archive what I wanted when $transaction=json_decode($data, true) is the return json format . But then, my aim is to make it asynchronous using jquery to receive the json_decode($data) from the php file... – Audenna Jan 13 '18 at 22:42
So, what are you confused about? – Unknown Jan 13 '18 at 22:45
How to exactly push the json data in form of json_decode($data) to the Ajax success event and then print it – Audenna Jan 13 '18 at 22:47
Why are you decoding the data when sending it to jQuery, how are you going to get the values? – Unknown Jan 13 '18 at 22:48
I'll update my answer with some php if that will clear up some confusion. If you are getting raw json back, there is no need for any other operations to take place. Just echo out the json so jQuery can parse it. – Unknown Jan 13 '18 at 22:52
Actually, I am working on a voguepay notification api.. And the api uses print_f($transaction) or var_dump($data) to fetch the results from a given URL in such that the $data=json_decode() ... But I could archive this just using only php.. I just wanted same with jquery/ajax – Audenna Jan 13 '18 at 22:53
I wouldn't mind if you updated your post.. Pls.. As this is a project I am working on and I am really lost on this – Audenna Jan 13 '18 at 22:53
Updated the post. – Unknown Jan 13 '18 at 23:02
OK.. I. Will try this out and definitely give feedback – Audenna Jan 13 '18 at 23:16

How to Parse php json_decode data to Jquery Ajax request

2 Answers2