CODEWITHSUNDEEP
javascriptjqueryhtmlajaxjson
BaBazinga
BaBazinga

Reputation: 159

How to call multiple different AJAX calls to the same div in HTML

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

Answers (4)

Arathi Sreekumar
Arathi Sreekumar

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

braindice
braindice

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

leapin_leprechaun
leapin_leprechaun

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

maembe
maembe

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

Related Questions