ย้อนกลับของ JSON.stringify?


338

ฉันกำลังคัดวัตถุอย่างหนึ่ง {'foo': 'bar'}

ฉันจะเปลี่ยนสตริงกลับไปเป็นวัตถุได้อย่างไร


6
โปรดทราบว่า{foo: 'bar'}JSON นั้นไม่ถูกต้อง (ในขณะที่มันเป็นนิพจน์จาวาสคริปต์ที่ถูกต้อง)
leemes

2
ลองใช้ JSON.parse หากเบราว์เซอร์ของคุณไม่รองรับให้ลอง json2.js
Anirudha Gupta

10
พวกเรากำลังติดต่อกับ lolcat ที่นี่
Pointy

1
บางทีฉันควรจะเพิ่มคำตอบอีก (อ่านที่สี่) ว่าคุณควรทำ JSON.parse ...
Titouan de Bailleul

33
@RobW ปรากฎว่าลิงก์ google ของคุณชี้กลับไปที่คำถามนี้เมื่อได้รับความนิยมสูงสุด #ironic
Chase Florell

คำตอบ:


501

คุณต้องการJSON.parse()สตริง

var str = '{"hello":"world"}';
try {
  var obj = JSON.parse(str); // this is how you parse a string into JSON 
  document.body.innerHTML += obj.hello;
} catch (ex) {
  console.error(ex);
}


8
เคล็ดลับสำหรับมืออาชีพ: วาง JSON.parse () ไว้ในโครงสร้างแบบลองจับได้เสมอเนื่องจากวิธีการดังกล่าวอาจทำให้ Node / Js ของคุณเสียหาย
Spock


62

JSON.stringifyและJSON.parseเกือบจะเป็น oposites และ "ปกติ" สิ่งนี้จะทำงาน:

var obj = ...;
var json = JSON.stringify(obj);  
var obj2 = JSON.parse(json);

ดังนั้น obj และ obj2 จึง "เหมือนกัน"

อย่างไรก็ตามมีข้อ จำกัด บางประการที่ต้องระวัง บ่อยครั้งที่ปัญหาเหล่านี้ไม่สำคัญว่าคุณกำลังจัดการกับวัตถุอย่างง่าย แต่ฉันจะอธิบายบางส่วนของพวกเขาที่นี่โดยใช้ฟังก์ชันตัวช่วยนี้:

function jsonrepack( obj ) { return JSON.parse(JSON.stringify(obj) ); }
  • คุณจะได้รับownPropertiesวัตถุและสูญเสียต้นแบบ:

    var MyClass = function() { this.foo="foo"; } 
    MyClass.prototype = { bar:"bar" }
    
    var o = new MyClass();
    var oo = jsonrepack(o);
    console.log(oo.bar); // undefined
    console.log( oo instanceof MyClass ); // false
  • คุณจะสูญเสียตัวตน:

    var o = {};
    var oo = jsonrepack(o);
    console.log( o === oo ); // false
  • ฟังก์ชั่นไม่รอด:

    jsonrepack( { f:function(){} } ); // Returns {}
  • วัตถุวันที่สิ้นสุดเป็นสตริง:

    jsonrepack(new Date(1990,2,1)); // Returns '1990-02-01T16:00:00.000Z'
  • ค่าที่ไม่ได้กำหนดอย่าอยู่รอด:

    var v = { x:undefined }
    console.log("x" in v);              // true
    console.log("x" in jsonrepack(v));  // false
  • วัตถุที่มีtoJSONฟังก์ชั่นอาจทำงานไม่ถูกต้อง

    x = { f:"foo", toJSON:function(){ return "EGAD"; } }
    jsonrepack(x) // Returns 'EGAD'

ฉันแน่ใจว่ามีปัญหากับประเภทอื่น ๆ ในตัวด้วย (ทั้งหมดนี้ผ่านการทดสอบโดยใช้ node.js ดังนั้นคุณอาจได้รับพฤติกรรมที่แตกต่างกันเล็กน้อยขึ้นอยู่กับสภาพแวดล้อมของคุณด้วย)

เมื่อมันไม่สำคัญว่ามันบางครั้งสามารถเอาชนะโดยใช้พารามิเตอร์เพิ่มเติมและJSON.parse JSON.stringifyตัวอย่างเช่น:

function MyClass (v) {
   this.date = new Date(v.year,1,1);
   this.name = "an object";
};

MyClass.prototype.dance = function() {console.log("I'm dancing"); }

var o = new MyClass({year:2010});
var s = JSON.stringify(o);

// Smart unpack function
var o2 = JSON.parse( s, function(k,v){
  if(k==="") { 
     var rv = new MyClass(1990,0,0);
     rv.date = v.date;
     rv.name = v.name;
     return rv
  } else if(k==="date") {
    return new Date( Date.parse(v) );
  } else { return v; } } );

console.log(o);             // { date: <Mon Feb 01 2010 ...>, name: 'an object' }
console.log(o.constructor); // [Function: MyClass]
o.dance();                  // I'm dancing

console.log(o2);            // { date: <Mon Feb 01 2010 ...>, name: 'an object' }
console.log(o2.constructor) // [Function: MyClass]        
o2.dance();                 // I'm dancing

1
ตาม"JSON เป็นรูปแบบข้อความที่เป็นอิสระจากภาษาอย่างสมบูรณ์ แต่ใช้การประชุมที่คุ้นเคยกับโปรแกรมเมอร์ของตระกูล C ภาษารวมถึง C, C ++, C #, Java, JavaScript, Perl, Python และอื่น ๆ อีกมากมาย" . สำหรับฉันนี่บอกว่าควรใช้ JSON สำหรับประเภท / ข้อมูลผู้ไม่เชื่อเรื่องภาษาเท่านั้น ดังนั้นตัวอย่างของคุณ (ในขณะที่ถูกต้องมาก) เกี่ยวข้องกับ JSON เท่านั้นมันเกี่ยวข้องกับ JavaScript และควรกำหนดให้มากขึ้นเป็น JSONP และไม่ใช่ JSON จริง ... IMOJSON SPEC
Chase Florell

ตัวอย่างหนึ่งของสิ่งนี้คือ{ bar:"bar" }(จากต้นแบบของคุณ) ไม่ถือว่า json ที่ถูกต้องเนื่องจากfooเป็นตัวแปรแทนที่จะเป็นสตริง JSON ที่ถูกต้องความต้องการที่จะเป็นkey string
Chase Florell

3
ฉันอ่าน OP ว่า "ฉันแปลงวัตถุจาวาสคริปต์เป็นสตริง JSON และตอนนี้ฉันต้องการแปลงกลับ - ฉันจะทำอย่างไร" ทุกคำตอบอื่น ๆ JSON.parseบอกว่าใช้เพียง ฉันแค่เตือนว่ามีหลายกรณีที่จะจัดการไม่ถูกต้อง หากคุณกำลังใช้ข้อมูลดั้งเดิมที่บริสุทธิ์ (ไม่มีคลาส, ต้นแบบ) และเฉพาะประเภทข้อมูลที่สนับสนุนโดย JSON (ไม่มีวันที่, XML, HTML เป็นต้น) คุณก็โอเค
Michael Anderson

นอกจากนี้ใน Javascript X = { foo:"bar" }นั้นเหมือนกันกับX = { "foo":"bar" }ที่X = {}; X.foo = "bar"เหมือนกันกับX={}; X["foo"] = "bar"วัตถุที่เป็นผลลัพธ์นั้นเหมือนกันในทั้ง 4 กรณี สิ่งนี้ไม่สร้างความแตกต่างให้กับความถูกต้องของ JSON ที่สร้างขึ้น
Michael Anderson

2
นี่เป็นคำตอบที่ครอบคลุมอย่างเด่นชัดและมีค่ามากกว่าที่จะเป็นคำตอบที่ยอมรับได้ ขอบคุณสำหรับการทำงานที่ยอดเยี่ยมของคุณ
scubbo

6

http://jsbin.com/tidob/1/edit?js,console,output

อ็อบเจ็กต์ JSON ดั้งเดิมมีวิธีการสำคัญสองวิธี

1. JSON.parse()
2. JSON.stringify() 
  1. JSON.parse()วิธีการแยกวิเคราะห์สตริง JSON - คือการฟื้นฟูวัตถุ JavaScript เดิม

    var jsObject = JSON.parse(jsonString);

  2. JSON.stringify () วิธีการรับวัตถุ JavaScript และส่งคืนเทียบเท่า JSON ของมัน

    var jsonString = JSON.stringify(jsObject);



5

เกี่ยวกับเรื่องนี้

var parsed = new Function('return ' + stringifiedJSON )();

evalนี้เป็นทางเลือกที่ปลอดภัยสำหรับ



-3
$("#save").click(function () {
    debugger
    var xx = [];
    var dd = { "firstname": "", "lastname": "", "address": "" };
    var otable1 = $("#table1").dataTable().fnGetData();

    for (var i = 0; i < otable1.length; i++) {
        dd.firstname = otable1[i][0];
        dd.lastname = otable1[i][1];
        dd.address = otable1[i][2];
        xx.push(dd);
        var dd = { "firstname": "", "lastname": "", "address": "" };
    }
    JSON.stringify(alert(xx));
    $.ajax({

        url: '../Home/save',
        type: 'POST',
        data: JSON.stringify({ u: xx }),
        contentType: 'application/json;',
        dataType: 'json',
        success: function (event) {
            alert(event);
            $("#table2").dataTable().fnDraw();
            location.reload();
        }
    });
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.