CODEWITHSUNDEEP
javascriptjqueryjson
Abishek
Abishek

Reputation: 11691

Updating a JSON object using Javascript

How can i update the following JSON object dynamically using javascript or Jquery?

var jsonObj = [{'Id':'1','Username':'Ray','FatherName':'Thompson'},  
               {'Id':'2','Username':'Steve','FatherName':'Johnson'},
               {'Id':'3','Username':'Albert','FatherName':'Einstein'}]

I would like to dynamically update the Username to 'Thomas' where the 'Id' is '3'.

How can I achieve this?

Upvotes: 56

Views: 295352

Answers (12)

Apurv
Apurv

Reputation: 113

//update & push json value into json object

    var sales1 = [];
if (jsonObj && Object.keys(jsonObj ).length != 0) {
        jsonObj .map((value) => {
            const check = sales1.filter(x => x.order_date === String(value.order_date).substring(0, 10))
            if (check.length) {
                sales1.filter(x => x.sale_price = Number(x.sale_price) + Number(value.sale_price))
            } else {
                let data = { "sale_price": Number(value.sale_price), "order_date": String(value.order_date).substring(0, 10) }
                sales1.push(data)
            }
        })
    }

Upvotes: 0

ZedBee
ZedBee

Reputation: 2378

You can easily update the username dynamically to 'Thomas' where the 'Id' is '3' using the following.

jsonObj.find(i=>i.Id===3).Username='Thomas'

Upvotes: -1

cansu
cansu

Reputation: 1144

I think this the more efficent way than for looping.

1-First find index of item. 2-Second edit exact element. (if not exist add)

Example :

let index= jsonObj.findIndex(x => x["Id"] === 3); 
if (index == -1) {
 // add
 jsonObj.push({ id:3, .... });
 } else {
  // update
   jsonObj[index]["Username"]="xoxo_gossip_girl"
 }

Upvotes: 1

Mahendren Mahisha
Mahendren Mahisha

Reputation: 1062

    var jsonObj = [{'Id':'1','Quantity':'2','Done':'0','state':'todo',
        'product_id':[315,"[LBI-W-SL-3-AG-TA004-C650-36] LAURA BONELLI-WOMEN'S-SANDAL"],
        'Username':'Ray','FatherName':'Thompson'},  
          {'Id':'2','Quantity':'2','Done':'0','state':'todo',
          'product_id':[314,"[LBI-W-SL-3-AG-TA004-C650-36] LAURA BONELLI-WOMEN'S-SANDAL"],
          'Username':'Steve','FatherName':'Johnson'},
          {'Id':'3','Quantity':'2','Done':'0','state':'todo',
          'product_id':[316,"[LBI-W-SL-3-AG-TA004-C650-36] LAURA BONELLI-WOMEN'S-SANDAL"],
          'Username':'Albert','FatherName':'Einstein'}];

          for (var i = 0; i < jsonObj.length; ++i) {
            if (jsonObj[i]['product_id'][0] === 314) {


                this.onemorecartonsamenumber();


                jsonObj[i]['Done'] = ""+this.quantity_done+"";

                if(jsonObj[i]['Quantity'] === jsonObj[i]['Done']){
                  console.log('both are equal');
                  jsonObj[i]['state'] = 'packed';
                }else{
                  console.log('not equal');
                  jsonObj[i]['state'] = 'todo';
                }

                console.log('quantiy',jsonObj[i]['Quantity']);
                console.log('done',jsonObj[i]['Done']);


            }
        }

        console.log('final',jsonObj);
}

quantity_done: any = 0;

  onemorecartonsamenumber() {
    this.quantity_done += 1;
    console.log(this.quantity_done + 1);
  }

Upvotes: 0

Michael Berkowski
Michael Berkowski

Reputation: 270609

A plain JavaScript solution, assuming jsonObj already contains JSON:

Loop over it looking for the matching Id, set the corresponding Username, and break from the loop after the matched item has been modified:

for (var i = 0; i < jsonObj.length; i++) {
  if (jsonObj[i].Id === 3) {
    jsonObj[i].Username = "Thomas";
    break;
  }
}

Here it is on jsFiddle.

Here's the same thing wrapped in a function:

function setUsername(id, newUsername) {
  for (var i = 0; i < jsonObj.length; i++) {
    if (jsonObj[i].Id === id) {
      jsonObj[i].Username = newUsername;
      return;
    }
  }
}

// Call as
setUsername(3, "Thomas");

Upvotes: 82

Joe Johnston
Joe Johnston

Reputation: 2936

I took Michael Berkowski's answer a step (or two) farther and created a more flexible function allowing any lookup field and any target field. For fun I threw splat (*) capability in there incase someone might want to do a replace all. jQuery is NOT needed. checkAllRows allows the option to break from the search on found for performance or the previously mentioned replace all. 

function setVal(update) {
    /* Included to show an option if you care to use jQuery  
    var defaults = { jsonRS: null, lookupField: null, lookupKey: null,
        targetField: null, targetData: null, checkAllRows: false }; 
    //update = $.extend({}, defaults, update); */

    for (var i = 0; i < update.jsonRS.length; i++) {
        if (update.jsonRS[i][update.lookupField] === update.lookupKey || update.lookupKey === '*') {
            update.jsonRS[i][update.targetField] = update.targetData;
            if (!update.checkAllRows) { return; }
        }
    }
}


var jsonObj = [{'Id':'1','Username':'Ray','FatherName':'Thompson'},  
           {'Id':'2','Username':'Steve','FatherName':'Johnson'},
           {'Id':'3','Username':'Albert','FatherName':'Einstein'}]

With your data you would use like: 

var update = {
    jsonRS: jsonObj,
    lookupField: "Id",
    lookupKey: 2, 
    targetField: "Username",
    targetData: "Thomas", 
    checkAllRows: false
    };

setVal(update);

And Bob's your Uncle. :) [Works great]

Upvotes: 2

Musa
Musa

Reputation: 2662

For example I am using this technique in Basket functionality.

Let us add new Item to Basket.

var productArray=[];


$(document).on('click','[cartBtn]',function(e){
  e.preventDefault();
  $(this).html('<i class="fa fa-check"></i>Added to cart');
  console.log('Item added ');
  var productJSON={"id":$(this).attr('pr_id'), "nameEn":$(this).attr('pr_name_en'), "price":$(this).attr('pr_price'), "image":$(this).attr('pr_image'), "quantity":1, "discount":0, "total":$(this).attr('pr_price')};


  if(localStorage.getObj('product')!==null){
    productArray=localStorage.getObj('product');
    productArray.push(productJSON);  
    localStorage.setObj('product', productArray);  
  }
  else{
    productArray.push(productJSON);  
    localStorage.setObj('product', productArray);  
  }


  itemCountInCart(productArray.length);

});

After adding some item to basket - generates json array like this

[
    {
        "id": "95",
        "nameEn": "New Braslet",
        "price": "8776",
        "image": "1462012394815.jpeg",
        "quantity": 1,
        "discount": 0,
        "total": "8776"
    },
    {
        "id": "96",
        "nameEn": "new braslet",
        "price": "76",
        "image": "1462012431497.jpeg",
        "quantity": 1,
        "discount": 0,
        "total": "76"
    },
    {
        "id": "97",
        "nameEn": "khjk",
        "price": "87",
        "image": "1462012483421.jpeg",
        "quantity": 1,
        "discount": 0,
        "total": "87"
    }
]

For Removing some item from Basket.

$(document).on('click','[itemRemoveBtn]',function(){

var arrayFromLocal=localStorage.getObj('product');
findAndRemove(arrayFromLocal,"id",$(this).attr('basketproductid'));
localStorage.setObj('product', arrayFromLocal);
loadBasketFromLocalStorageAndRender();
});

//This function will remove element by specified property. In my case this is ID.
function findAndRemove(array, property, value) {
  array.forEach(function(result, index) {
    if(result[property] === value) {
      //Remove from array
      console.log('Removed from index is '+index+' result is '+JSON.stringify(result));
      array.splice(index, 1);

    }    
  });
}

And Finally the real answer of the question "Updating a JSON object using JS". In my example updating product quantity and total price on changing the "number" element value.

$(document).on('keyup mouseup','input[type=number]',function(){

  var arrayFromLocal=localStorage.getObj('product');
  setQuantityAndTotalPrice(arrayFromLocal,$(this).attr('updateItemid'),$(this).val());
  localStorage.setObj('product', arrayFromLocal);
  loadBasketFromLocalStorageAndRender();
});

function setQuantityAndTotalPrice(array,id,quantity) {

  array.forEach(function(result, index) {
    if(result.id === id) {
      result.quantity=quantity;
      result.total=(quantity*result.price);
    }    
  });

}

Upvotes: 1

Vignesh Rajendran
Vignesh Rajendran

Reputation: 51

$(document).ready(function(){        
    var jsonObj = [{'Id':'1','Username':'Ray','FatherName':'Thompson'},  
               {'Id':'2','Username':'Steve','FatherName':'Johnson'},
               {'Id':'3','Username':'Albert','FatherName':'Einstein'}];

    $.each(jsonObj,function(i,v){       
      if (v.Id == 3) {
        v.Username = "Thomas";
        return false;
      }
    });

alert("New Username: " + jsonObj[2].Username);

});

Upvotes: 5

Drew Noakes
Drew Noakes

Reputation: 310822

JSON is the JavaScript Object Notation. There is no such thing as a JSON object. JSON is just a way of representing a JavaScript object in text.

So what you're after is a way of updating a in in-memory JavaScript object. qiao's answer shows how to do that simply enough.

Upvotes: 2

Zirak
Zirak

Reputation: 39808

var i = jsonObj.length;
while ( i --> 0 ) {
    if ( jsonObj[i].Id === 3 ) {
        jsonObj[ i ].Username = 'Thomas';
        break;
    }
}

Or, if the array is always ordered by the IDs:

jsonObj[ 2 ].Username = 'Thomas';

Upvotes: 2

Rodik
Rodik

Reputation: 4092

use:

var parsedobj = jQuery.parseJSON( jsonObj);

This will only be useful if you don't need the format to stay in string. otherwise you'd have to convert this back to JSON using the JSON library.

Upvotes: 2

qiao
qiao

Reputation: 18219

simply iterate over the list then check the properties of each object.

for (var i = 0; i < jsonObj.length; ++i) {
    if (jsonObj[i]['Id'] === '3') {
        jsonObj[i]['Username'] = 'Thomas';
    }
}

Upvotes: 6

Related Questions