如何使用javascript或Jquery動態更新以下JSON對象？使用Javascript更新JSON對象
var jsonObj = [{'Id':'1','Username':'Ray','FatherName':'Thompson'},
{'Id':'2','Username':'Steve','FatherName':'Johnson'},
{'Id':'3','Username':'Albert','FatherName':'Einstein'}]
我想動態地將用戶名更新爲'Thomas'，'Id'是'3'。
我該如何實現這個目標？
甲普通的JavaScript溶液：
遍歷它尋找匹配的ID，從環路設置相應的用戶名，和break後的匹配項已被修改：
for (var i = 0; i < jsonObj.length; i++) {
if (jsonObj[i].Id === 3) {
jsonObj[i].Username = "Thomas";
break;
}
}
下面是包裝在一個功能中的相同的東西：
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");
以上解決方案在小提琴手中工作。我有問題的json字符串，爲了使它在ASP.NET MVC 5 Razor視圖中工作，我不得不使用obj = JSON.parse（jsonObj）將字符串解析爲json。在操縱之前。希望它能幫助別人。順便說一句，我upvoted因爲解決方案的作品。 – user2330678 2016-05-03 16:53:21
這是一個很好的解決方案。我在下面的回答中稍微深入一點。 – 2017-12-09 00:19:43
只需遍歷列表，然後檢查每個對象的屬性。
for (var i = 0; i < jsonObj.length; ++i) {
if (jsonObj[i]['Id'] === '3') {
jsonObj[i]['Username'] = 'Thomas';
}
}
使用：
var parsedobj = jQuery.parseJSON(jsonObj);
如果你不需要留在字符串格式這隻會是有用的。 否則，您必須使用JSON庫將其轉換回JSON。
var i = jsonObj.length;
while (i --> 0) {
if (jsonObj[i].Id === 3) {
jsonObj[ i ].Username = 'Thomas';
break;
}
}
或者，如果陣列總是由標識排序：
jsonObj[ 2 ].Username = 'Thomas';
JSON是JavaScript 對象符號。沒有像JSON對象這樣的東西。 JSON只是用文本表示JavaScript對象的一種方式。
所以你在做什麼是一種更新內存中JavaScript對象的方法。 qiao's answer顯示瞭如何做到這一點。
$(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);
});
例如我在購物籃功能中使用這種技術。
讓我們添加新項目籃。
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);
});
加入一些產品籃後 - 生成JSON數組這樣
[
{
"id": "95",
"nameEn": "New Braslet",
"price": "8776",
"image": "1462.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"
}
]
對於從籃卸下一些項目。
$(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);
}
});
}
最後是「使用JS更新JSON對象」的真正答案。在我的示例中更改產品數量和更改「數量」元素值的總價格。
$(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);
}
});
}
我把Michael Berkowski的回答步驟（或兩個）更遠並創建了一個更靈活的功能，允許任何查找字段和任何目標字段。爲了好玩，我在其中插入了splat（*）功能，以便有人可能想要進行全部替換。 jQuery不是必需的。 checkAllRows允許選項從搜索結果中找到性能或前面提到的替換全部。
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'}]
與您的數據，你會使用像：
var update = {
jsonRS: jsonObj,
lookupField: "Id",
lookupKey: 2,
targetField: "Username",
targetData: "Thomas",
checkAllRows: false
};
setVal(update);
而完事大吉。 :) [很好]
JSON代表JavaScript Object Notation。這是js非常簡單的理解。你的問題不涉及JSON。它純粹處理js對象操作。 「使用Javascript更新JSON對象」是一個毫無意義的表達，因爲它轉化爲「使用Javascript更新Javascript對象」。 – Zirak 2012-01-02 15:26:06
Zirak，你必須在聚會上玩得開心 – stef 2016-08-21 18:04:45