Reputation: 159
so I am reading data from a JSON file. Then I am successfully able to use AJAX calls to update the div in the HTML code. For example:
$("#carSize").append(carInfo[0].carSize);
The div carSize will get the data from the JSON file. However there is going to be 10 different cars with many different properties such as carSize. Since the carInfo array is big and full of several different properties, is there a way to simpler way of my achieving this without having to create a different div to append to for each car's property.
HTML:
<html>
<link href="json.css" rel="stylesheet" type="text/css">
<body>
<div class = "whiteBar">
<div id = "box1">
<div id = "carPrice"></div>
<div id = "carRate"></div>
<a href = "" id = "selBut">SELECT</a>
<div id = "total"></div>
</div>
<div id = "box2">
<div id = "carSize"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="my_script.js"></script>
</body>
</html>
JS
$(document).ready(function()
{
$.getScript("vehicle_data.json", function()
{
$("#carPrice").append(carInfo[0].carPrice + ".00");
$("#carRate").append(carInfo[0].carRate);
$("#total").append("Total: " + carInfo[0].carPrice * 7 + ".00 USD");
$("#carSize").append(carInfo[0].carSize);
});
});
JSON (sample)
var carInfo = [
{
carId: 1,
carPrice : 35.00,
carRate : 'USD/DAY',
carSize : 'Extra Small Car',
type : 'Economy',
},
{
carId: 2,
carPrice : 37.00,
carRate : 'USD/DAY',
carSize : 'Small Car',
type : 'Compact',
}
];
Note how the JS code is just for 1 car and I need it done for 9 other cars. Any ideas?
Upvotes: 0
Views: 495
Reputation: 2584
Here is a generic solution if you get all of your cars in one go:
var carInfo = [
{
carId: 1,
carPrice : 35.00,
carRate : 'USD/DAY',
carSize : 'Extra Small Car',
type : 'Economy',
},
{
carId: 2,
carPrice : 37.00,
carRate : 'USD/DAY',
carSize : 'Small Car',
type : 'Compact',
}
];
function getCarHTML (car){
var carHtml = '<div class = "box1" class="car-' + car.carId + '" data-id="' + car.carId + '">' +
'<div id = "carPrice">' + car.carPrice + '</div>' +
'<div id = "carRate">' + car.carRate + '</div>' +
'<a href = "" class="select-btn" data-id="' + car.carId + '">SELECT</a>' +
'<div id = "total">' + car.carPrice + '</div>' +
'</div>' +
'<div class = "box2">' +
'<div class = "carSize">' + car.carSize + '</div>' +
'</div>';
return carHtml;
};
//this is your ajax on success function
var showCars = function (cars) {
var $carContainer = $('#car-info-container');
cars.forEach(function(car) {
var carHTML = getCarHTML(car);
var $carIfPreset = $carContainer.find('.car-' + car.carId);
if ($carIfPreset.length) {
$carIfPreset.replaceWith(carHTML);
} else {
$carContainer.append(carHTML);
}
});
};
//calling function here, you should make this call inside your ajax
//Assuming ajax to return an array of cars
showCars(carInfo);
Here is a working jsfiddle: https://jsfiddle.net/fjh3mjtm/
Expected json here is {cars: [{carId: 1, carPrice: 35.00, ...}, {carId: 2, carPrice: 37.00, ...}, ...]}
Upvotes: 0
Reputation: 988
I am not quite sure if this fits what you need but I have had good luck with jsRender http://www.jsviews.com/ for situations like that.
Upvotes: 0
Reputation: 605
Could you do something like:
$(document).ready(function(){
$.getScript("vehicle_data.json", function() {
for(i=0; i<carInfo.length; i++){
var $carContainer = $('<div class="carContainer-'+i+'"></div>');
$carContainer.append('<div id="carPrice-'+i+'">'+carInfo[i].carPrice + ".00"+'</div>')
.append('<div id="carRate-'+i+'">'+carInfo[i].carRate+'</div>')
.append('<div id="total-'+i+'">'+"Total: " + carInfo[i].carPrice * 7 + ".00 USD"+'</div>')
.append('<div id="carSize-'+i+'">'+carInfo[i].carSize+'</div>');
$('body').append($carContainer);
}
});
});
Upvotes: 1
Reputation: 1300
Create a new div rather then appending it to existing html Now that you've stored it in a variable, you can append anything you want to it
$.each(carInfo,function(i,car){
//create a new div to store car info
var myNewDiv = $('<div class="car-info"></div>');
// append car properties to the info div
myNewDiv.append(car.carSive);
myNewDiv.append(car.carId); //etc
// append the new div to existing html
$('.whiteBar').append(myNewDiv);
});
Upvotes: 1