2

This is more of a json question but since it is within wordpress and is being processed by admin-ajax.php I thought it suits this forum best. I have created a standard ajax form procedure as shown below.

HTML:

<form action="" method="post" id="stock-search-form" />               
     <input class="stock-search-element" type="search" name="stock-search-name" id="stock-search-id"/>
     <input class="hide-me" type="hidden" name="action" value="process_stock" />
     <button class="stock-button" name="stock-button-name" id="stock-button-id" type="send">Search</button>                
</form>
<div class="stock-table-outer"></div>

PHP:

function process_stock() {
    $the_php_result = array("foo1" => "String_1", 
                            "foo2" => "String_2", 
                            "foo3" => "String_3", 
                            "foo4" => "String_4", 
                            "foo5" => "String_5", 
                            "foo6" => "String_6", 
                            "foo7" => "String_7", 
                            "foo8" => "String_8", 
                            "foo9" => "String_9", 
                            "foo10" => "String_10", 
                            "foo11" => "String_11", 
                            "foo12" => "String_12",
                            "foo13" => "String_13",
                            );
    echo json_encode($the_php_result);
}

JQUERY:

jQuery('#stock-search-form').submit(ajaxSubmit);

function ajaxSubmit(){

var StockSymbolUI = jQuery(this).serialize();

jQuery.ajax({
    type:"POST",
    url: "/wp-admin/admin-ajax.php",
    data: StockSymbolUI,
    success:function(data){
        jQuery(".stock-table-outer").show();
        jQuery(".stock-table-outer").html(data);
    }
});

return false;
}

The result I get returned at the front end is this:

{"foo1":"String_1","foo2":"String_2","foo3":"String_3",
"foo4":"String_4","foo5":"String_5","foo6":"String_6",
"foo7":"String_7","foo8":"String_8","foo9":"String_9",
"foo10":"String_10","foo11":"String_11","foo12":"String_12",
"foo13":"String_13"}

This at first glance looks like a json object but I dont believe it is.

What I want to do is access the elements of the object, but if I give data[0] instead of data in the success of the jquery code, all I get is {, i.e. the first character of the string. I have tried using JSON.parse(data) or jQuery.parseJSON(data) as suggested elsewhere but then I get nothing returned.

Any help would be much appreciated as I have been stuck with this for a whole day...

Harry

5
  • 1
    What's outputted to the console if you use console.log( data ) in your succes callback function? And what's outputted to the console if you do the same but use dataType: 'json' as an additional parameter to jQuery.ajax()?
    – engelen
    Mar 31 '16 at 8:40
  • I think this is going to the right direction.. The console.log(data) gave the same as the result in the original question. The console.log(data) with dataType: 'json' gave Object {foo1: "String_1", ..., foo13: "String_13"} followed by __proto__:Object. So this did turn my result into a real object? The thing is that now the jQuery(".stock-table-outer").html(data); returns nothing. If I do JSON.parse(data) or jQuery.grep( jQuery.parseJSON(data)) I get Uncaught SyntaxError: Unexpected token o because of [object Object]x
    – harman
    Mar 31 '16 at 9:01
  • OK... Engelen Thanks!!! That was it.. If I call jQuery(".stock-table-outer").html(data.foo1); I get what I want!!!! Thanks man.
    – harman
    Mar 31 '16 at 9:06
  • If you want, please post the answer so that I can upvote it and mark it as the solution. Otherwise I will close the thread with a follow-up answer tto my question.. Thanks again.
    – harman
    Mar 31 '16 at 9:09
  • Glad to be of help! I'll post the answer.
    – engelen
    Mar 31 '16 at 9:41
2

The result that is currently returned is raw text, which means data[0] accesses the first element (i.e. character) of the string, which is {. Obviously, you want to turn the returned data into a JSON object. To do this, jQuery.ajax() has a nifty property called dataType, which determines the way jQuery interprets the data returned from the AJAX call. Possible values are 'xml', 'json', 'script', and 'html'. Simply set the dataType parameter to 'json' in your code and you're set!

jQuery.ajax( {
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    data: StockSymbolUI,
    dataType: 'json',
    success: function( data ){
        jQuery( '.stock-table-outer' ).show();
        jQuery( '.stock-table-outer' ).html( data );
    }
} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.