JSON 객체에 새 배열 요소 추가


120

다음과 같이 teamJSON이라는 변수에있는 JSON 파일에서 읽은 JSON 형식 개체가 있습니다.

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

다음과 같은 새 항목을 배열에 추가하고 싶습니다.

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

결국

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

파일에 다시 쓰기 전에. 새 요소에 추가하는 좋은 방법은 무엇입니까? 나는 가까워졌지만 모든 큰 따옴표가 이스케이프되었습니다. 나는 SO에 대한 좋은 대답을 찾았지만이 사건을 다루는 사람은 없습니다. 도움을 주시면 감사하겠습니다.


6
yourObj.theTeam.push({"teamId":"4","status":"pending"});
PSL

2
"JSON"은 객체가 아니라 표기법입니다.
Brad Christie

1
파일에서 JSON 객체를 읽을 때 JSON 또는 문자열로 해석됩니까? 문자열 인 경우 먼저 문자열을 JSON으로 구문 분석해야하는 경우 다른 주석과 답변이 제안하는 작업을 수행 할 수 있습니다.
Mark

3
@Charles는 귀하의 제목을 읽고 귀하의 의견을 재검토합니다.
Brad Christie

1
@ CharlesWyke-Smith 귀하의 teamJSON변수 는 어떤 유형입니까 ? JSON 문자열 '{"theTeam":[...]}'입니까 , 즉 실제 객체 리터럴입니까? 힌트 : 사용console.log(typeof teamJSON)

답변:


233

JSON 은 단지 표기법 일뿐입니다 . 원하는 parse대로 변경하여 네이티브 자바 스크립트 개체에 변경 사항을 적용한 다음 JSON으로stringify 돌아갈 수 있습니다.

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

16
이를 지적하기 위해 +1은 먼저 조작 할 객체로 파싱되어야합니다.
Brad Christie

3
그는 이미라는 변수에 개체가 있다고 말했습니다 teamJSON. 어떤 시점에서 언급하는 문자열입니다

6
@Phil : JSON이면 문자열입니다. 그렇지 않은 경우 JSON이 아닙니다.
user2736012

1
이스케이프 된 따옴표는 실제로 JSON이 두 번 인코딩되었는지 궁금해합니다.
user2736012

24
폴, 그것은 매우 건설적인 대답입니다. 그것은 원래 포스터를 무시하지 않고 문제 진술의 결함을 해결합니다. 자바 스크립트 객체에서 작동하는 것과 해당 객체의 JSON 텍스트 표현 사이의 경계를 더 명확하게 설명합니다. JSON이 파싱되면 순수 자바 스크립트 객체에서 작동한다는 것을 이해하는 데 필수적이라고 생각합니다. 원래 JSON에서 가져온 사실은 관련이 없습니다. 어쨌든, 당신의 대답을 읽는 것은 OP를 바보처럼 느끼게 만드는 모든 경멸적인 코멘트 후에 신선한 공기의 숨결이었습니다.
Larry Hector

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

마지막 위치추가 하려면 다음을 사용하십시오.

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

첫 번째 위치추가 하려면 다음 코드를 사용하십시오.

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

배열 의 특정 위치추가 하려는 사람은 다음을 시도하십시오.

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

위의 코드 블록은 두 번째 요소 뒤에 요소를 추가합니다.


1

먼저 JSON 객체를 구문 분석 한 다음 항목을 추가 할 수 있습니다.

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

마지막으로 우리 는 obj 를 JSON으로 다시 JSON.stringify 합니다.


JSON에 theTeam과 같은 이름이 없지만 대신 teamId 및 status 요소가있는 노드 만 포함하면 어떻게 될까요? 그래서 내 모습은 다음과 같습니다. var str = '[{ "teamId": "1", "status": "pending"}, { "teamId": "2", "status": "member"}, { "teamId ":"3 ","status ":"회원 "}] ';
Shafique

0

예를 들어 여기에는 바구니에 항목을 추가하기위한 버튼과 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);
}

JSON 객체를 배열 결과에 추가 한 후 (LocalStorage에 있음) :

[{ "id": "99", "nameEn": "제품 이름 1", "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"}]

이 작업 후에는 Java의 List로 서버에 데이터를 쉽게 보낼 수 있습니다.

전체 코드 예제는 여기

localStorage를 사용하여 간단한 카트를 어떻게 보관합니까?


0

제 경우에는 JSON 객체에 기존 배열이 없기 때문에 먼저 배열 요소를 만든 다음 요소를 푸시해야했습니다.

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

(이 답변은이 특정 질문과 관련이 없을 수 있지만 다른 사람에게 도움이 될 수 있습니다)


0

변수에 이미 데이터가 있다고 가정합니다 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
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.