การสร้าง JSON แบบไดนามิกด้วยค่าอินพุตแต่ละค่าโดยใช้ jquery


91

ฉันมีสถานการณ์ที่ฉันต้องการอ่านข้อมูลบางอย่างจากรูปแบบ JSON ผ่าน PHP แต่ฉันมีปัญหาในการทำความเข้าใจว่าฉันควรสร้างวัตถุ Javascript อย่างไรเพื่อสร้างรูปแบบ JSON แบบไดนามิก

สถานการณ์ของฉันมีดังนี้:

<input title="QA" type="text" class="email">
<input title="PROD" type="text" class="email">
<input title="DEV" type="text" class="email">

รหัส Javascript ที่ฉันมีจนถึงตอนนี้ผ่านการป้อนข้อมูลแต่ละรายการ แต่ฉันไม่เข้าใจวิธีการประมวลผลต่อจากนี้

var taskArray = {};

$("input[class=email]").each(function() {
  var id = $(this).attr("title");
  var email = $(this).val();

  //how to create JSON?

});

ฉันต้องการรับผลลัพธ์ต่อไปนี้ถ้าเป็นไปได้

[{title: QA, email: 'a@a.com'}, {title: PROD, email: 'b@b.com'},{title: DEV, email: 'c@c.com'}]

ตำแหน่งที่ได้รับอีเมลจากค่าช่องป้อนข้อมูล

คำตอบ:


277

แบบนี้:

function createJSON() {
    jsonObj = [];
    $("input[class=email]").each(function() {

        var id = $(this).attr("title");
        var email = $(this).val();

        item = {}
        item ["title"] = id;
        item ["email"] = email;

        jsonObj.push(item);
    });

    console.log(jsonObj);
}

คำอธิบาย

an array of objectsคุณกำลังมองหา ดังนั้นคุณจึงสร้างอาร์เรย์เปล่า สร้างวัตถุสำหรับแต่ละชิ้นinputโดยใช้ "ชื่อ" และ "อีเมล" เป็นกุญแจ จากนั้นคุณเพิ่มวัตถุแต่ละชิ้นลงในอาร์เรย์

หากคุณต้องการสตริงให้ทำ

jsonString = JSON.stringify(jsonObj);

ตัวอย่างผลลัพธ์

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}] 

เหตุใดใน 3 ตัวอย่างนี้ฉันจึงได้รับสิ่งนี้เสมอ 'Uncaught ReferenceError: jsonObj ไม่ได้กำหนดไว้'
Gino

@Gino คุณคัดลอกวางหรือพิมพ์? ดูบรรทัดที่กำหนด jsonObj
ATOzTOA

16

ฉันไม่คิดว่าคุณสามารถเปลี่ยนวัตถุ JavaScript ให้เป็นสตริง JSON โดยใช้ jQuery เท่านั้นโดยสมมติว่าคุณต้องการสตริง JSON เป็นเอาต์พุต

ขึ้นอยู่กับเบราว์เซอร์ที่คุณกำหนดเป้าหมายคุณสามารถใช้JSON.stringifyฟังก์ชันเพื่อสร้างสตริง JSON

โปรดดูข้อมูลเพิ่มเติมที่http://www.json.org/js.htmlนอกจากนี้คุณยังสามารถค้นหาตัวแยกวิเคราะห์ JSON สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับออบเจ็กต์ JSON โดยกำเนิด

ในกรณีของคุณ:

var array = [];
$("input[class=email]").each(function() {
    array.push({
        title: $(this).attr("title"),
        email: $(this).val()
    });
});
// then to get the JSON string
var jsonString = JSON.stringify(array);

10

อาจเป็นเพราะสิ่งนี้จะช่วยได้ฉันต้องการ JS ที่บริสุทธิ์ทุกที่ที่เป็นไปได้มันช่วยเพิ่มประสิทธิภาพอย่างมากเนื่องจากคุณไม่มีการเรียกใช้ฟังก์ชัน JQuery มากมาย

var obj = [];
var elems = $("input[class=email]");

for (i = 0; i < elems.length; i += 1) {
    var id = this.getAttribute('title');
    var email = this.value;
    tmp = {
        'title': id,
        'email': email
    };

    obj.push(tmp);
}

Big + 1 ไปพร้อมกับโซลูชันนี้คำตอบที่ยอมรับทำให้ฉันมีปัญหาบางอย่างใน IE
Bobadevv

0

จากตัวอย่างข้างต้น - หากคุณกำลังมองหา json (ไม่ใช่อาร์เรย์ของวัตถุ) เพียงแค่ใช้

function getJsonDetails() {
      item = {}
      item ["token1"] = token1val;
      item ["token2"] = token1val;
      return item;
}
console.log(JSON.stringify(getJsonDetails()))

ผลลัพธ์นี้จะพิมพ์เป็น (json ที่ถูกต้อง)

{ 
   "token1":"samplevalue1",
   "token2":"samplevalue2"
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.