Update operation in Javascript

Question

I'm new to JavaScript and I'm still learning. So I have an object with cars:

var cars = [
    {
        image:'http://superbvehicles.com/wp-content/uploads/2015/10/Nissan-GTR-3.jpg',
        name:'nissan',
        model:'gtr',
        hp:565,
        price:100.000,
    },
    {
        image:'http://bestcarmag.com/sites/default/files/4700070mitsubishi-lancer-06.jpg',
        name:'mitsubishi',
        model:'lancer',
        hp:380,
        price:40.000,
    },
    {
        image:'http://bestcarmag.com/sites/default/files/2048005subaru-impreza-wrx-sti-01.jpg',
        name:'subaru',
        model:'impreza',
        hp:400,
        price:50.000
    },
    {
        image:'http://stancewords.stanceworks.netdna-cdn.com/wp-content/uploads/2012/06/datsun-240z-slammed-red.jpg',
        name:'nissan',
        model:'fairlady 240z',
        hp:200,
        price:70.000
    },
    {
        image:'https://s-media-cache-ak0.pinimg.com/736x/35/be/6b/35be6b46846e893d332ddfef989614fe.jpg',
        name:'nissan',
        model:'skyline',
        hp:320,
        price:80.000
    }
]

and a html table which is filled with the information from this object. I created "edit" button for every row in the table and when you press it it takes the information for the row and inserts it into a form so the user could edit it. This is the function that does that:

function editCar(i){
    var image = cars[i].image;
    var name = cars[i].name;
    var model = cars[i].model;
    var hp = cars[i].hp;
    var price = cars[i].price;

    $('#image-edit').val(image);
    $('#name-edit').val(name);
    $('#model-edit').val(model);
    $('#hp-edit').val(hp);
    $('#price-edit').val(price);

    var newImage = $('#image-edit').val();
    var newName = $('#name-edit').val();
    var newModel = $('#model-edit').val();
    var newHp = $('#hp-edit').val();
    var newPrice = $('#price-edit').val();


};

So my question is how can I insert the new information (provided by the user in the form) into the object in the place of the old one?

P.S. Sorry if my english is bad.

you can't update the object for using long time. it will work for just run time. But you can make ajax call to store the new form data in a page and design the old object from it. — Murad Hasan
– Murad Hasan, Commented Mar 30, 2016 at 10:03

somethinghere · Accepted Answer · 2016-03-30 10:04:35Z

First of, it would be best to store your index somewhere so you know which index you want to replace with new data, and it needs to be stored somewhere where all of our seperate functions can share it - in this case, we will define it in the global context. Then all you need to do is overwrite it on form submission:

// Initialise as -1 so we can check that no index is selected
var currentIndex = -1;

function editCar(i){
    // Set the global variable to this index so we can use it in other functions
    currentIndex = i;
    ...
}

// I am assuming your form is wrapped in <form id="form"></form>
$("#form").on("submit", function(event){
    // Without preventDefault, the page might get reloaded and therefor reset
    event.preventDefault();
    // This is for safety, to make sure there is an index
    if(currentIndex >= 0){
        cars[currentIndex].image = $('#image-edit').val();
        cars[currentIndex].name = $('#name-edit').val();
        cars[currentIndex].model = $('#model-edit').val();
        cars[currentIndex].hp = $('#hp-edit').val();
        cars[currentIndex].price = $('#price-edit').val();
    }
});

Collectives™ on Stack Overflow

Update operation in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related