使用Javascript更新JSON对象

Question

如何使用javascript或Jquery动态更新以下JSON对象？

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

我想动态地将用户名更新为'Thomas'，'Id'是'3'。

我该如何实现这个目标？

Answer 1

甲普通的JavaScript溶液：

遍历它寻找匹配的ID，从环路设置相应的用户名，和break后的匹配项已被修改：

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

Here it is on jsFiddle.

下面是包装在一个功能中的相同的东西：

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

Answer 2

只需遍历列表，然后检查每个对象的属性。

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

Answer 3

使用：

var parsedobj = jQuery.parseJSON(jsonObj); 

如果你不需要留在字符串格式这只会是有用的。 否则，您必须使用JSON库将其转换回JSON。

Answer 4

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

或者，如果阵列总是由标识排序：

jsonObj[ 2 ].Username = 'Thomas'; 

Answer 5

JSON是JavaScript 对象符号。没有像JSON对象这样的东西。 JSON只是用文本表示JavaScript对象的一种方式。

所以你在做什么是一种更新内存中JavaScript对象的方法。 qiao's answer显示了如何做到这一点。

Answer 6

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

}); 

Answer 7

例如我在购物篮功能中使用这种技术。

让我们添加新项目篮。

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

} 

Answer 8

我把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); 

而完事大吉。 :) [很好]