Aktualizacja obiektu JSON przy użyciu kodu JavaScript

Question

Jak mogę dynamicznie aktualizować następujący obiekt JSON za pomocą javascript lub Jquery?

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

Chciałbym dynamicznie aktualizować Nazwa użytkownika do „Thomas”, gdzie „id” jest „3”.

Jak mogę to osiągnąć?

Answer 1

zwykły JavaScript rozwiązanie:

pętli nad nim szukając Id pasującym ustawić odpowiednią nazwę użytkownika i break z pętli po dopasowana pozycja została zmodyfikowana:

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

Here it is on jsFiddle.

Oto ta sama rzecz zapakowana w funkcję:

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

wystarczy przejrzeć listę, a następnie sprawdzić właściwości każdego obiektu.

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

Answer 3

zastosowanie:

var parsedobj = jQuery.parseJSON(jsonObj); 

To będzie tylko użyteczne, jeśli nie trzeba format pozostania w ciąg. inaczej musiałbyś przekonwertować to z powrotem do JSON używając biblioteki JSON.

Answer 4

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

Lub, jeśli tablica jest zawsze sortowane według identyfikatorów:

jsonObj[ 2 ].Username = 'Thomas'; 

Answer 5

JSON jest JavaScript Object Notation. Nie ma czegoś takiego jak obiekt JSON JSON. JSON jest po prostu sposobem reprezentowania obiektu JavaScript w tekście.

To, czego szukasz, to sposób na aktualizację obiektu JavaScript w pamięci. qiao's answer pokazuje, jak to zrobić po prostu.

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

Na przykład używam tej techniki w Funkcji koszyka.

Pozwól nam dodać nowy element do koszyka.

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

}); 

Po dodaniu jakiś element do kosza - generuje tablicę json jak ten

[ 
    { 
     "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" 
    } 
] 

do usuwania jakąś pozycję z koszyka.

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

    }  
    }); 
} 

I wreszcie prawdziwa odpowiedź na pytanie "Aktualizacja obiektu JSON przy użyciu JS". W moim przykładzie aktualizowanie ilości produktu i ceny całkowitej przy zmianie wartości elementu "liczba".

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

Wziąłem Michael Berkowski „S odebrać etapie (lub dwa) dalej, tworząc bardziej elastyczne funkcję umożliwiającą dowolne pole odnośników oraz każde pole docelowej. Dla zabawy wrzuciłem funkcję splat (*), aby ktoś mógł chcieć zastąpić wszystko. jQuery NIE jest potrzebne. checkAllRows pozwala na przerwę od szukania znalezionego dla wydajności lub poprzednio wymienionego, zamień wszystko.

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

z danymi należy użyć jak:

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

setVal(update); 

A Bob wujek. :) [Działa świetnie]