Undefined result when printing Object property using Ajax Jquery

Question

When I try to access the object property outside the ajax when getting the value of an input it returns the correct value. But when I try to log and append that value inside the success function it returns undefined. How do I address this type of issue? It seems that object is local and cannot accessed by the ajax? Below is my code.

$('#add-order').on('click',function(){

    //create an object for orders
    var order = {   

        name : $('#name').val(),
        drink : $('#drink').val()
    };

    $.ajax({
        url : 'api/orders.json',
        type : 'POST',
        data : order,
        dataType : 'json',
        success : function(newOrder){
            console.log(newOrder.name);
            $('#orders').append('<li>' + newOrder.name + ' : ' + newOrder.drink + '</li>');
        },
        error: function(){
            console.log('error connecting');
        }
    });

});

Here's the index.html

<h4>Add a Coffee Order</h4>
<ul id="orders">

</ul>

<p><input type="text" id="name"></p>

<p><input type="text" id="drink"></p>

<button type="submit" id="add-order">Add</button>

Since I needed a server side language I used PHP. However I cannot write the data coming from the ajax using the JSON.stringify method.

    <?php

   if (isset($_POST['submit'])) {
        $orders = $_POST['data'];
        $orderFile = fopen('api/orders.json', 'w');

       fwrite($orderFile, $orders);
       fclose($orderFile);
   }

I also updated my code on top.When I hard coded any string to fwrite($orderFile, "my orders") it will write on the orders.json however when I used the $orders it's not working. Am i missing something here?

score 3 · Accepted Answer · answered Dec 24 '15 at 11:26

3

newOrder is the JSON returned by the AJAX call and it can have differnet keys depending upon what you are doing, if you want to print the order object then do

$('#orders').append('<li>' + order.name + ' : ' + order.drink + '</li>');

answered Dec 24 '15 at 11:26

void

36,090
8
62
107

Ah got it. Yeah that's why when I log the newOrder it returns the data in it. Thank you so much.But one last question will the value I inputted in the input will be written to order.json file? If not how will I do it? – Jay Gorio Dec 24 '15 at 11:31
@JayGorio: Well, it *might* be written to the json file. That's what the server needs to do, all you can do clientside is to pass the data to the server through that POST request. – Bergi Dec 24 '15 at 11:35
@Bergi i do not think it is being written, because the file name is `.json` and it can not do any server side processing. – void Dec 24 '15 at 11:36
@Beigi yeah its not being written. Ho do I deal with this?I thought it will automatically written when using POST method but it's not. – Jay Gorio Dec 24 '15 at 11:39
@void but if I change the extension will it be written? – Jay Gorio Dec 24 '15 at 11:40
@void: The file extension means absolutely nothing. Every server does need to do some processing to serve any requests at all. What the processing is depends entirely on its configuration/programming. Jay, please ask a new question where you show us your serverside code. – Bergi Dec 24 '15 at 11:51
@Bergi Okay then. So I need to use php then. – Jay Gorio Dec 24 '15 at 12:03
@JayGorio: No, you don't *need*. Any serverside programming language (or even just a server framework that doesn't require programming) will do the job, which includes but is not exclusive to PHP. – Bergi Dec 24 '15 at 12:10
@Bergi thanks can you check my server side code. It seems its not writing . – Jay Gorio Dec 24 '15 at 14:11
@JayGorio: As I said, you should [open a new question for that](http://stackoverflow.com/questions/ask). Tag it PHP. Show us where the php file is located. Is it even executed? – Bergi Dec 24 '15 at 14:23
@JayGorio exactly, please open a new question for PHP related issues, and if this answer solves your current issue please consider marking it as right answer. – void Dec 24 '15 at 14:25
@Bergi oops okay sorry. – Jay Gorio Dec 24 '15 at 14:28
@Bergi heres the link http://stackoverflow.com/questions/34454373/how-to-write-values-coming-from-form-input-to-json-using-php – Jay Gorio Dec 24 '15 at 14:38

score 0 · Answer 2 · answered Dec 24 '15 at 11:32

But when I try to log and append that value inside the success function it returns undefined.

That is because of your json file orders.json or the logic of serverside code. In the returned json newOrder in the success callback the object will not be having a key name/drink so that causes in undefined.

So, the thing is you have to return it from serverside with the specified keys, which should look like this:

{ "name":"Mango", "drink":"shake" }

Undefined result when printing Object property using Ajax Jquery

2 Answers2