Updating a JSON object using Javascript

Question

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?

JSON stands for JavaScript Object Notation. It's something js understands very simply. Your question doesn't deal with JSON. It deals purely with js object manipulation. "Updating a JSON object using Javascript" is a moot expression, as it translates to "Updating a Javascript object using Javascript". — Zirak
– Zirak, Commented Jan 2, 2012 at 15:26

Michael Berkowski · Accepted Answer · 2019-02-20 16:11:43Z

83

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");

edited Feb 20, 2019 at 16:11

answered Jan 2, 2012 at 15:24

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2330678 Over a year ago

Above solution works in the fiddler. I had json string as in the question, to make it work in ASP.NET MVC 5 Razor view, I had to parse the string to json using obj = JSON.parse(jsonObj); before manipulating. Hope it helps someone. Btw I upvoted because the solution works.

Joe Johnston Over a year ago

This is a great solution. I took it a bit farther in my answer below.

qiao · Accepted Answer · 2012-01-02 15:25:14Z

6

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';
    }
}

answered Jan 2, 2012 at 15:25

qiao

18.3k7 gold badges60 silver badges46 bronze badges

Comments

Vignesh Rajendran · Accepted Answer · 2015-04-28 07:50:52Z

5

$(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);

});

edited Apr 28, 2015 at 7:50

answered Apr 28, 2015 at 7:45

Vignesh Rajendran

511 silver badge2 bronze badges

1 Comment

Skippy le Grand Gourou Over a year ago

For people wondering, jQuery's $.each() seems way slower than vanilla for loops.

Rodik · Accepted Answer · 2012-01-02 15:28:59Z

2

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.

answered Jan 2, 2012 at 15:28

Rodik

4,10228 silver badges49 bronze badges

Comments

Zirak · Accepted Answer · 2012-01-02 15:29:31Z

2

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';

answered Jan 2, 2012 at 15:29

Zirak

40k13 gold badges85 silver badges92 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:33:27Z

2

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.

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Jan 2, 2012 at 15:30

Drew Noakes

313k174 gold badges704 silver badges770 bronze badges

Comments

Joe Johnston · Accepted Answer · 2017-12-09 00:17:53Z

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]

Musa · Accepted Answer · 2016-05-31 21:14:12Z

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);
    }    
  });

}

cansu · Accepted Answer · 2021-09-22 07:43:49Z

1

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"
 }

edited Sep 22, 2021 at 7:43

answered Aug 10, 2021 at 13:01

cansu

1,1621 gold badge13 silver badges25 bronze badges

2 Comments

Nebukadnezar Over a year ago

Isn't the index lacking in the "update"-part to specify which row to modify? e.g. jsonObj[index]["Username"]="xoxo_gossip_girl"

cansu Over a year ago

yes you are right, I edited that line.

Mahendren Mahisha · Accepted Answer · 2019-07-03 13:46:02Z

    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);
  }

Apurv · Accepted Answer · 2023-01-13 11:20:31Z

0

//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)
            }
        })
    }

edited Jan 13, 2023 at 11:20

answered Jan 13, 2023 at 11:19

Apurv

1579 bronze badges

Comments

ZedBee · Accepted Answer · 2022-07-03 14:58:28Z

-1

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'

edited Jul 3, 2022 at 14:58

answered Jul 1, 2022 at 14:27

ZedBee

2,3687 gold badges40 silver badges63 bronze badges

2 Comments

Tyler2P Over a year ago

Your answer could be improved by adding more information on what the code does and how it helps the OP.

ZedBee Over a year ago

@Tyler2P It's a pretty straightforward answer to what OP asked

Collectives™ on Stack Overflow

Updating a JSON object using Javascript

12 Answers 12

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related