POST javascript object to json and retireve the values

javascript

#1

I am sending javascript object(key/value pair) using POST method to JSON and retrieving them, but the values it showing undefined.

JS code:
$(function(){
var $orders = $("#orders");
var $company = $("#company");
var $color = $("#color");
$.ajax({
type : ‘GET’,
url : ‘cardata.json’,
dataType: ‘json’,
cache: false,
success : function(orders){
$.each(orders, function(i, order){
$orders.append( '

  • Company: '+ order.company + ‘,’ + ’ ’ + 'Color: ’ + order.color + ‘
  • ’);
    });
    },
    error: function(){
    alert(“Error loading order”);
    }
    });
        	$("#add-order").on('click', function(){
        	
        		var order = {
        			company: $company.val(),
        			color: $color.val()		
        		};
        		alert(order.company);
        		
        		$.ajax({
        			type : 'POST',
        			url: 'cardata.json',
        			data: JSON.stringify(order),
        			dataType: 'json',
        			success: function(neworder){			
        				$orders.append('<li>Company: <strong>'+ neworder.company + '</strong>,'  +  ' ' + 'Color: <strong>' + neworder.color + '</strong></li>');				
        			},
        			error: function(){
        				alert("Error saving order");
        			}
        		});
        	
        	});
        });
    

    HTML Code:

    <h2>Car Orders</h2>
    	<ul id="orders">
    	</ul>
    	
    	<h4>Add a Car order</h4>
    	<p>Car companyName : <input type="text" id="company"></p>
    	<p>Color : <input type="text" id="color"></p>
    	<button id="add-order">ADD</button>

    #2

    Hi there kodelerner

    What does your ‘cardata.json’ file look like? are you appending items or what?


    #3

    below is the JSON data.
    [
    {
    “id” : 1,
    “company”:“BMW”,
    “color” : “blue”
    },
    {
    “id” : 2,
    “company”:“Benz”,
    “color” : “black”
    },
    {
    “id” : 3,
    “company”:“Porsche”,
    “color” : “yellow”
    }
    ]


    #4

    OK I’m slightly confused (not difficult :grinning:) Do you want to pull the data from cardata.json OR add to that data? In otherwords what are you actually trying to do?

    Whatever it is it’s not a difficult thing, just need to know what you want to achieve that’s all


    #5

    need to add and retrieve them as well.


    #6

    OK, so are you ‘re-writing’ the json file after the post?, if so how? as I would post to a php page then append to the json file - unless I am misunderstanding


    #7

    so, we required serverside scripting, and also right now, just enter the value in the input boxed and press ADD, it will show undefined values, want to show the entered value.


    #8

    In that case your success function would be

    success: function(neworder){      
                $orders.append('<li>Company: <strong>'+ order.company + '</strong>,'  +  ' ' + 'Color: <strong>' + order.color + '</strong></li>');        
              },
    
    • NO?

    #9

    hmm…kudos…:slight_smile:

    small mistake.