แปลง XML เป็น JSON (และย้อนกลับ) โดยใช้ Javascript


145

คุณจะแปลงจาก XML เป็น JSON แล้วกลับเป็น XML ได้อย่างไร

เครื่องมือต่อไปนี้ทำงานได้ค่อนข้างดี แต่ไม่สอดคล้องกันทั้งหมด:

มีใครเคยเจอสถานการณ์นี้มาก่อนหรือไม่


8
กรุณาอธิบายความไม่สอดคล้องกันได้ด้วย
Josh Stodola

4
โดยเฉพาะอย่างยิ่งเกี่ยวข้องกับการแปลงอาร์เรย์ JSON ด้วยองค์ประกอบเพียง 1 เป็น XML เมื่อคุณแปลงกลับเป็น JSON แทนที่จะเป็นอาร์เรย์ 1 องค์ประกอบจะสร้างวัตถุตามตัวอักษร ฉันทำงานด้วยการตรวจสอบประเภทด้วย $. isArray () และใส่ในอาร์เรย์ถ้า! $. isArray ()
Jason Suárez

1
xml2json - fyneworks.com/jquery/xml-to-json - แบ่ง 500 จาก ณ 15/02/2013 14:25 AEST
ysrb

ลิงก์ json2xml เสีย
whirlwin

@ysrb ตัวอย่างปลั๊กอินจะไม่ทำงานใน IE8!
เพื่อน

คำตอบ:


103

ฉันคิดว่านี่เป็นสิ่งที่ดีที่สุด: การ แปลงระหว่าง XML และ JSON

อย่าลืมอ่านบทความประกอบในเว็บไซต์ xml.com O'Reillyซึ่งมีรายละเอียดของปัญหาเกี่ยวกับการแปลงเหล่านี้ซึ่งฉันคิดว่าคุณจะได้รู้แจ้ง ความจริงที่ว่า O'Reilly กำลังโฮสต์บทความควรระบุว่าโซลูชันของ Stefan นั้นมีข้อดี


ขอบคุณสำหรับการตอบกลับ! ในกรณีของฉัน JSON เป็นตัวแทนที่เป็นที่ยอมรับและ XML ใช้สำหรับ XSLT .. การใช้งานไม่ใช่ความคิดของฉัน! :)
Jason Suárez

นี่เป็นเพียงในเบราว์เซอร์ ไม่ได้ใช้กับ node.js หรือสภาพแวดล้อมที่ไม่ใช่เบราว์เซอร์ ความคิดอื่น ๆ ?
Homer6 6

1
ในส่วนที่เกี่ยวกับ @JasonDenizac แสดงความคิดเห็นในโพสต์ของเขาฉันไม่แน่ใจว่าจะเข้าใจได้อย่างไรว่าลิงก์นี้ช่วยแก้ไขปัญหาของการมีวัตถุแทนที่จะเป็นอาร์เรย์ของรายการหนึ่งรายการ ...
guiomie

1
ฉันพบว่าถ้าคุณเริ่มต้นจาก json-xml-json ไลบรารีนี้ทำงานได้ดี แต่ถ้าคุณต้องการ xml-json-xml มีปัญหากับการย้อนกลับได้เนื่องจากมันเพิ่มองค์ประกอบ metadata xml เช่น <o> และ <e>
vishr

3
โปรดทราบว่านี่เป็นวิธีแก้ปัญหาลิขสิทธิ์ลอกเลียนแบบ มันเป็นเพียงตัวเลือกเมื่อคุณกำลังเขียนซอฟต์แวร์โอเพนซอร์ซ
แจสเปอร์

48

https://github.com/abdmob/x2js - ห้องสมุดของฉัน (URL ที่อัปเดตจากhttp://code.google.com/p/x2js/ ):

ไลบรารีนี้จัดเตรียม XML ถึง JSON (วัตถุ JavaScript) และฟังก์ชันการแปลง javascript ในทางกลับกัน ห้องสมุดมีขนาดเล็กมากและไม่ต้องการห้องสมุดเพิ่มเติมอื่น ๆ

ฟังก์ชั่น API

  • ใหม่ X2JS () - เพื่อสร้างอินสแตนซ์ของคุณเพื่อเข้าถึงฟังก์ชันการทำงานของไลบรารีทั้งหมด นอกจากนี้คุณสามารถระบุตัวเลือกการกำหนดค่าเพิ่มเติมได้ที่นี่
  • X2JS.xml2json - แปลง XML ที่ระบุเป็น DOM Object เป็น JSON
  • X2JS.json2xml - แปลง JSON เป็น XML DOM Object
  • X2JS.xml_str2json - แปลง XML ที่ระบุเป็นสตริงเป็น JSON
  • X2JS.json2xml_str - แปลง JSON เป็นสตริง XML

การสาธิตออนไลน์บนhttp://jsfiddle.net/abdmob/gkxucxrj/1/

var x2js = new X2JS();
function convertXml2JSon() {
    $("#jsonArea").val(JSON.stringify(x2js.xml_str2json($("#xmlArea").val())));
}

function convertJSon2XML() {
    $("#xmlArea").val(x2js.json2xml_str($.parseJSON($("#jsonArea").val())));
}

convertXml2JSon();
convertJSon2XML();
$("#convertToJsonBtn").click(convertXml2JSon);
$("#convertToXmlBtn").click(convertJSon2XML);

1
สวัสดีคุณเอาชนะปัญหาได้อย่างไรถ้าคุณมีวัตถุหนึ่งชิ้นในวัตถุวัตถุนั้นอยู่ในซากวัตถุซึ่งถ้ามีวัตถุ n> 1 คุณมีอาร์เรย์ สิ่งนี้ทำให้ยากที่จะใช้ xml กับวัตถุ json ในเทมเพลต ...
guiomie

ใช่คุณควรใช้เคล็ดลับและขึ้นอยู่กับความรู้ของคุณเกี่ยวกับโครงสร้าง XML (เพราะไม่มี XSD ที่นี่) ใช้ <node> ... <node> _asArray ไวยากรณ์เพื่อเข้าถึงโหนดของคุณเสมอเป็นอาร์เรย์ (ลำดับ)
abdolence

1
ตัวอย่าง: // สตริง XML ถึง JSON var xmlText = "<MyOperation> <test> สำเร็จ </test> <test2> <item> ddsfg </item> <item> dsdgfdgfd </item> </MyOperation> "; var jsonObj = X2JS.xml_str2json (xmlText); การแจ้งเตือน (jsonObj.MyOperation.test); การแจ้งเตือน (jsonObj.MyOperation.test_asArray [0]);
สละสิทธิ์

ปัญหาหลักของฉันคือเมื่อฉันเปลี่ยน json ของฉันเป็น xml ย้อนกลับ json นั้นเต็มไปด้วยคุณสมบัติพิเศษและเมื่อเวอร์ชัน xml ของสตริงทำให้ทุกสิ่งไร้ประโยชน์ มันมีชนิดของเครื่องหมายจุลภาคและช่องว่างทั้งหมด ...
guiomie

คุณสามารถส่งตัวอย่างของคุณไปที่code.google.com/p/x2js/issuesฉันจะตรวจสอบได้ไหม
abdolence

25

คำตอบเหล่านี้ช่วยฉันได้มากในการทำฟังก์ชั่นนี้:

function xml2json(xml) {
  try {
    var obj = {};
    if (xml.children.length > 0) {
      for (var i = 0; i < xml.children.length; i++) {
        var item = xml.children.item(i);
        var nodeName = item.nodeName;

        if (typeof (obj[nodeName]) == "undefined") {
          obj[nodeName] = xml2json(item);
        } else {
          if (typeof (obj[nodeName].push) == "undefined") {
            var old = obj[nodeName];

            obj[nodeName] = [];
            obj[nodeName].push(old);
          }
          obj[nodeName].push(xml2json(item));
        }
      }
    } else {
      obj = xml.textContent;
    }
    return obj;
  } catch (e) {
      console.log(e.message);
  }
}

ตราบใดที่คุณผ่านวัตถุ jquery dom / xml: สำหรับฉันมันคือ:

Jquery(this).find('content').eq(0)[0]

เนื้อหาอยู่ที่ไหนในฟิลด์ที่ฉันเก็บ xml ไว้


3

ซักพักฉันเขียนเครื่องมือนี้https://bitbucket.org/surenrao/xml2jsonสำหรับแอพ TV Watchlist ของฉันหวังว่ามันจะช่วยได้เช่นกัน

Synopsys: ไลบรารีที่ไม่เพียง แต่แปลง xml เป็น json แต่ยังง่ายต่อการดีบัก (โดยไม่มีข้อผิดพลาดแบบวงกลม) และสร้าง json กลับไปเป็น xml คุณสมบัติ: - แยกวิเคราะห์ XML กับวัตถุ json พิมพ์วัตถุ json กลับไปที่ xml สามารถใช้เพื่อบันทึก xml ใน IndexedDB เป็นวัตถุ X2J พิมพ์วัตถุ json


@kleopatra ลิงก์นี้ชี้ไปที่เครื่องมือซึ่งแปลง xml เป็น json มันไม่ใช่การอ้างอิง แต่เป็นการเชื่อมโยงไปยังทรัพยากรจริง ไม่แน่ใจว่าฉันควรทำยังไงต่อ :)
surya

2

ผมเองอยากจะแนะนำเครื่องมือนี้ มันเป็นตัวแปลง XML เป็น JSON

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

นอกจากนี้ยังนำแอตทริบิวต์ XML มาพิจารณาด้วย

var xml = ‘<person id=”1234 age=”30”><name>John Doe</name></person>’;
var json = xml2json(xml); 

console.log(json); 
// prints ‘{“person”: {“id”: “1234”, “age”: “30”, “name”: “John Doe”}}’

นี่คือตัวอย่างออนไลน์ !


4
ไม่พบ
repit

1

คำเตือน: ฉันเขียนfast-xml-parser

Fast XML Parser สามารถช่วยแปลง XML เป็น JSON และในทางกลับกัน นี่คือตัวอย่าง;

var options = {
    attributeNamePrefix : "@_",
    attrNodeName: "attr", //default is 'false'
    textNodeName : "#text",
    ignoreAttributes : true,
    ignoreNameSpace : false,
    allowBooleanAttributes : false,
    parseNodeValue : true,
    parseAttributeValue : false,
    trimValues: true,
    decodeHTMLchar: false,
    cdataTagName: "__cdata", //default is 'false'
    cdataPositionChar: "\\c",
};
if(parser.validate(xmlData)=== true){//optional
    var jsonObj = parser.parse(xmlData,options);
}

หากคุณต้องการแยกวิเคราะห์ JSON หรือวัตถุ JS ลงใน XML แล้ว

//default options need not to set
var defaultOptions = {
    attributeNamePrefix : "@_",
    attrNodeName: "@", //default is false
    textNodeName : "#text",
    ignoreAttributes : true,
    encodeHTMLchar: false,
    cdataTagName: "__cdata", //default is false
    cdataPositionChar: "\\c",
    format: false, 
    indentBy: "  ",
    supressEmptyNode: false
};
var parser = new parser.j2xParser(defaultOptions);
var xml = parser.parse(json_or_js_obj);

: D FXP เป็นมากกว่าเครื่องมือแปลง XML 2 JSON โปรดตรวจสอบว่าเป็น readme
Amit Kumar Gupta

1

นี่เป็นเครื่องมือที่ดีจากไลบรารี npm ที่มีเอกสารและมีชื่อเสียงซึ่งทำการแปลง xml <-> js ได้เป็นอย่างดี: แตกต่างจากโซลูชันที่นำเสนอข้างต้นบางส่วน (อาจจะทั้งหมด) แปลงความคิดเห็น xml ด้วย

var obj = {name: "Super", Surname: "Man", age: 23};

var builder = new xml2js.Builder();
var xml = builder.buildObject(obj);

1

ใน 6 สาย ES6 ง่าย ๆ :

xml2json = xml => {                                                                                                                                                     
  var el = xml.nodeType === 9 ? xml.documentElement : xml                                                                                                               
  var h  = {name: el.nodeName}                                                                                                                                          
  h.content    = Array.from(el.childNodes || []).filter(e => e.nodeType === 3).map(e => e.textContent).join('').trim()                                                  
  h.attributes = Array.from(el.attributes || []).filter(a => a).reduce((h, a) => { h[a.name] = a.value; return h }, {})                                                 
  h.children   = Array.from(el.childNodes || []).filter(e => e.nodeType === 1).map(c => h[c.nodeName] = xml2json(c))                                                    
  return h                                                                                                                                                              
}  

ทดสอบกับecho "xml2json_example()" | node -r xml2json.es6แหล่งที่มาที่https://github.com/brauliobo/biochemical-db/blob/master/lib/xml2json.es6


0

ฉันใช้ xmlToJson เพื่อรับค่า xml เพียงค่าเดียว
ฉันพบว่าการทำสิ่งต่อไปนี้ง่ายกว่ามาก (หาก xml เกิดขึ้นเพียงครั้งเดียว .. )

let xml =
'<person>' +
  ' <id>762384324</id>' +
  ' <firstname>Hank</firstname> ' +
  ' <lastname>Stone</lastname>' +
'</person>';

let getXmlValue = function(str, key) {
  return str.substring(
    str.lastIndexOf('<' + key + '>') + ('<' + key + '>').length,
    str.lastIndexOf('</' + key + '>')
  );
}


alert(getXmlValue(xml, 'firstname')); // gives back Hank


0

ฉันได้สร้างฟังก์ชั่นวนซ้ำโดยใช้ regex ในกรณีที่คุณไม่ต้องการติดตั้งไลบรารี่และทำความเข้าใจกับเหตุผลเบื้องหลังสิ่งที่เกิดขึ้น:

const xmlSample = '<tag>tag content</tag><tag2>another content</tag2><tag3><insideTag>inside content</insideTag><emptyTag /></tag3>';
console.log(parseXmlToJson(xmlSample));

function parseXmlToJson(xml) {
    const json = {};
    for (const res of xml.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
        const key = res[1] || res[3];
        const value = res[2] && parseXmlToJson(res[2]);
        json[key] = ((value && Object.keys(value).length) ? value : res[2]) || null;

    }
    return json;
}

คำอธิบาย Regex สำหรับแต่ละลูป:

  • res [0] - ส่งคืน xml (ตามสภาพ)
  • res [1] - ส่งคืนชื่อแท็ก xml
  • res [2] - ส่งคืนเนื้อหา xml
  • res [3] - ส่งคืนชื่อแท็ก xml ในกรณีที่แท็กปิดตัวเอง ในตัวอย่าง:<tag />

คุณสามารถตรวจสอบการทำงานของ regex ได้ที่นี่: https://regex101.com/r/ZJpCAL/1

หมายเหตุ: ในกรณีที่ json มีคีย์ที่มีค่าไม่ได้กำหนดจะถูกลบออก นั่นเป็นเหตุผลที่ฉันได้ใส่ null ตอนท้ายบรรทัด 9


-2

วิธีที่ดีที่สุดในการใช้ฝั่งเซิร์ฟเวอร์เนื่องจากฝั่งไคลเอ็นต์ทำงานได้ไม่ดีในทุกสถานการณ์ ฉันพยายามสร้างตัวแปลง json ออนไลน์เป็น xml และ xml เป็นตัวแปลง json โดยใช้ javascript และฉันรู้สึกว่าแทบเป็นไปไม่ได้เพราะมันไม่ได้ทำงานในทุกสถานการณ์ ในที่สุดฉันก็ลงมือทำด้านเซิร์ฟเวอร์โดยใช้ Newtonsoft ใน ASP.MVC นี่คือตัวแปลงออนไลน์http://techfunda.com/Tools/XmlToJson

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