POST javascript object to json and retireve the values

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>

    Hi there kodelerner

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

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

    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

    need to add and retrieve them as well.

    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

    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.

    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?

    hmm…kudos…:slight_smile:

    small mistake.

    The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request. If you want to send an AJAX request then use $.ajax() method.
    The ajax() method is used to perform an AJAX (asynchronous HTTP) request.
    All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.