การเพิ่มองค์ประกอบอาร์เรย์ใหม่ให้กับออบเจ็กต์ JSON


120

ฉันมีออบเจ็กต์รูปแบบ JSON ที่ฉันอ่านจากไฟล์ JSON ที่ฉันมีในตัวแปรชื่อ teamJSON ซึ่งมีลักษณะดังนี้:

 {"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 ก่อนจากนั้นคุณสามารถทำตามที่ความคิดเห็นและคำตอบอื่นแนะนำได้
มาระโก

3
@ ชาร์ลส์อ่านชื่อของคุณแล้วตรวจสอบความคิดเห็นของคุณอีกครั้ง
Brad Christie

1
@ CharlesWyke-Smith teamJSONตัวแปรของคุณคืออะไร? เป็นสตริง JSON เช่น'{"theTeam":[...]}'หรือตัวอักษรของวัตถุจริงหรือไม่ คำแนะนำ: ใช้console.log(typeof teamJSON)
ฟิลิป

คำตอบ:


234

JSONเป็นเพียงสัญกรณ์ ; เพื่อทำการเปลี่ยนแปลงตามที่คุณต้องการparseเพื่อให้คุณสามารถใช้การเปลี่ยนแปลงกับJavaScript Objectดั้งเดิมจากนั้นstringifyกลับไปที่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"}]}"

16
+1 สำหรับการชี้สิ่งนี้จำเป็นต้องแยกวิเคราะห์ไปยังวัตถุก่อนจึงจะจัดการได้
Brad Christie

3
teamJSONเขาบอกว่าเขาแล้วมีวัตถุในตัวแปรชื่อ ไม่มีสายอักขระใดที่กล่าวถึง
ฟิล

6
@ ฟิล: ถ้าเป็น JSON มันเป็นสตริง ถ้าไม่ใช่แสดงว่าไม่ใช่ JSON
user2736012

1
เครื่องหมายคำพูดที่หลีกเลี่ยงทำให้ฉันสงสัยว่า JSON ถูกเข้ารหัสสองครั้งหรือไม่
user2736012

24
Paul นั่นเป็นคำตอบที่สร้างสรรค์มาก กล่าวถึงข้อบกพร่องในคำชี้แจงปัญหาโดยไม่ดูหมิ่นโปสเตอร์ต้นฉบับ โดยจะอธิบายขอบเขตระหว่างการทำงานบนวัตถุจาวาสคริปต์และการแสดงข้อความ 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);

ในที่สุดเราJSON.stringify objกลับไป JSON


จะเกิดอะไรขึ้นถ้า JSON ของเราไม่มีชื่อเช่นทีม แต่มีเพียงโหนดที่มีองค์ประกอบ teamId & status แทน? ของฉันจะมีลักษณะดังนี้: var str = '[{"teamId": "1", "status": "pending"}, {"teamId": "2", "status": "member"}, {"teamId ":" 3" , "สถานะ": "สมาชิก"}] ';
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 ในผลลัพธ์ Array คือ (ใน LocalStorage):

[{"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" "ภาพ": "1461449679506.jpeg"}]

หลังจากการดำเนินการนี้คุณสามารถส่งข้อมูลไปยังเซิร์ฟเวอร์เป็นรายการใน Java ได้อย่างง่ายดาย

ตัวอย่างโค้ดเต็มอยู่ที่นี่

ฉันจะจัดเก็บรถเข็นแบบธรรมดาโดยใช้ localStorage ได้อย่างไร?


0

ในกรณีของฉันอ็อบเจ็กต์ JSON ของฉันไม่มี Array อยู่เลยดังนั้นฉันต้องสร้างองค์ประกอบอาร์เรย์ก่อนจากนั้นจึงต้องพุชองค์ประกอบ

  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.