Dodanie nowego elementu tablicy do obiektu JSON

120

Mam obiekt w formacie JSON, który odczytałem z pliku JSON, który mam w zmiennej o nazwie teamJSON, która wygląda następująco:

 {"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}

Chcę dodać nowy element do tablicy, taki jak

{"teamId":"4","status":"pending"}

skończyć

{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"},{"teamId":"4","status":"pending"}]}

przed ponownym zapisaniem do pliku. Jaki jest dobry sposób dodania do nowego elementu? Zbliżyłem się, ale wszystkie podwójne cudzysłowy zniknęły. Szukałem dobrej odpowiedzi na SO, ale żadna nie obejmuje tego przypadku. Każda pomoc jest mile widziana.

Charles Wyke-Smith
źródło
6
yourObj.theTeam.push({"teamId":"4","status":"pending"});
PSL
2
„JSON” nie jest obiektem - to notacja.
Brad Christie,
1
Kiedy odczytujesz obiekt JSON z pliku, czy jest on interpretowany jako JSON czy jako ciąg? Jeśli jest to ciąg znaków, musisz najpierw przeanalizować go jako JSON, a następnie możesz zrobić to, co sugeruje inny komentarz i odpowiedź.
Mark
3
@Charles przeczytaj swój tytuł, a następnie ponownie przeanalizuj swój komentarz.
Brad Christie,
1
@ CharlesWyke-Smith Jakiego typu jest Twoja teamJSONzmienna? Czy jest to ciąg JSON, tj. Czy '{"theTeam":[...]}'rzeczywisty literał obiektu? Podpowiedź: użyjconsole.log(typeof teamJSON)
Phil

Odpowiedzi:

233

JSON to tylko notacja ; aby wprowadzić żądaną zmianę, parseaby można było zastosować zmiany do natywnego obiektu JavaScript , a następnie z stringifypowrotem do formatu JSON

var jsonStr = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

var obj = JSON.parse(jsonStr);
obj['theTeam'].push({"teamId":"4","status":"pending"});
jsonStr = JSON.stringify(obj);
// "{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"},{"teamId":"4","status":"pending"}]}"
Paul S.
źródło
16
+1 za wskazanie, że należy najpierw przeanalizować obiekt, aby nim manipulować.
Brad Christie,
3
Powiedział, że ma już obiekt w zmiennej o nazwie teamJSON. W żadnym momencie nie wspomniano o sznurku
Phil
6
@Phil: Jeśli to JSON, jest to ciąg. Jeśli nie, to nie jest JSON.
user2736012
1
Cudzysówki sprawiają, że zastanawiam się, czy JSON został zakodowany dwukrotnie.
user2736012
24
Paul, to bardzo konstruktywna odpowiedź. Odnosi się do braków w stwierdzeniu problemu bez umniejszania znaczenia oryginalnego plakatu. Bardziej wyraźnie wyznacza granice między operowaniem na obiektach javascript a reprezentacją tekstową JSON tych obiektów. Myślę, że ważne jest, aby zrozumieć, że po przeanalizowaniu JSON działamy na czystych obiektach javascript - fakt, że pierwotnie pochodziły z JSON, nie ma znaczenia. W każdym razie przeczytanie twojej odpowiedzi było powiewem świeżego powietrza po wszystkich obraźliwych komentarzach, które sprawiły, że PO poczuł się jak idiota.
Larry Hector,
20
var Str_txt = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

Jeśli chcesz dodać na ostatniej pozycji, użyj tego:

var parse_obj = JSON.parse(Str_txt);
parse_obj['theTeam'].push({"teamId":"4","status":"pending"});
Str_txt = JSON.stringify(parse_obj);
Output //"{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"},{"teamId":"4","status":"pending"}]}"

Jeśli chcesz dodać na pierwszej pozycji, użyj następującego kodu:

var parse_obj = JSON.parse(Str_txt);
parse_obj['theTeam'].unshift({"teamId":"4","status":"pending"});
Str_txt = JSON.stringify(parse_obj);
Output //"{"theTeam":[{"teamId":"4","status":"pending"},{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}"

Każdy, kto chce dodać coś w określonej pozycji tablicy, spróbuj tego:

parse_obj['theTeam'].splice(2, 0, {"teamId":"4","status":"pending"});
Output //"{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"4","status":"pending"},{"teamId":"3","status":"member"}]}"

Powyższy blok kodu dodaje element po drugim elemencie.

Ajay Gupta
źródło
1

Najpierw musimy przeanalizować obiekt JSON, a następnie możemy dodać element.

var str = '{"theTeam":[{"teamId":"1","status":"pending"},
{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

var obj = JSON.parse(str);
obj['theTeam'].push({"teamId":"4","status":"pending"});
str = JSON.stringify(obj);

Wreszcie JSON.stringify z obj plecami do JSON

Abhijit
źródło
Co jeśli nasz JSON nie ma nazwy takiej jak theTeam, ale zawiera tylko węzły z elementami teamId & status? więc mój wyglądałby następująco: var str = '[{"teamId": "1", "status": "pending"}, {"teamId": "2", "status": "member"}, {"teamId ":" 3 "," status ":" członek "}] ';
Shafique
0

Na przykład tutaj jest element taki jak przycisk do dodawania pozycji do koszyka i odpowiednie atrybuty do zapisania w localStorage.

'<a href="#" cartBtn pr_id='+e.id+' pr_name_en="'+e.nameEn+'" pr_price="'+e.price+'" pr_image="'+e.image+'" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>Add to cart</a>'

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


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


});

Storage.prototype.setObj = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObj = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

Po dodaniu obiektu JSON do Array wynik jest (w LocalStorage):

[{"id": "99", "nameEn": "Product Name1", "price": "767", "image": "1462012597217.jpeg"}, {"id": "93", "nameEn" : "Nazwa produktu2", "price": "76", "image": "1461449637106.jpeg"}, {"id": "94", "nameEn": "Nazwa produktu3", "price": "87" , "image": "1461449679506.jpeg"}]

po tej akcji możesz łatwo wysłać dane do serwera jako List w Javie

Przykład pełnego kodu jest tutaj

Jak mogę przechowywać prosty koszyk za pomocą localStorage?

Musa
źródło
0

W moim przypadku mój obiekt JSON nie miał żadnego istniejącego Array, więc najpierw musiałem utworzyć element tablicy, a następnie musiałem go wypchnąć.

  elementToPush = [1, 2, 3]
  if (!obj.arr) this.$set(obj, "arr", [])
  obj.arr.push(elementToPush)  

(Ta odpowiedź może nie pasować do tego konkretnego pytania, ale może pomóc komuś innemu)

Ajit A. Kenjale
źródło
0

Załóżmy, że mamy już dane w zmiennej alreadyData;

var alreadyData=[{"id":"99","nameEn":"Product Name1","price":"767","image":"1462012597217.jpeg"},{"id":"93","nameEn":"Product Name2","price":"76","image":"1461449637106.jpeg"},{"id":"94","nameEn":"Product Name3","price":"87","image":"1461449679506.jpeg"}];

var fields = []; //new array
var json = JSON.parse(alreadyData); //just parse in one variable
var json = JSON.parse(tableColumns);
for (var i = 0; i < json.length; i++) {
    fields.push(json[i]);//push data in fields
} 
fields.push({ 'id':33, 'nameEn': 'Singh', 'price': '222','image': '1462012597217.jpeg' }); // its new data
Davinder Singh
źródło