JavaScript XML 과 JSON 의 상호 전환 코드 구현

다음은 자 바스 크 립 트 가 XML 과 JSON 의 상호 전환 을 실현 하 는 예 를 공유 합 니 다. 이 안 에는 외국 의 xml 가 json 으로 전환 하 는 세 가지 예 가 소개 되 어 있 습 니 다. 이 예 들 이 도움 이 되 기 를 바 랍 니 다.
최근 온라인 XML 편집기 개발 중 이 며 JSON 을 중간 포맷 으로 사용 할 계획 이다.JSON 은 XML 에 비해 읽 기 쉽 고 해석 속도 가 빠 르 며 점용 공간 이 적 다 는 장점 이 있어 WEB 에서 데 이 터 를 전달 하기 쉽 기 때문이다.그러나 실제 사용 에서 무시 하기 쉬 운 세부 사항 을 발 견 했 고 XML 의 원시 구 조 를 엄 격 히 확보 해 야 하 는 경우 JSON 으로 전환 할 때 주의 가 필요 하 다.
XML 을 JSON 으로 변환 하 는 형식 은 다음 과 같 습 니 다.

   //XML  
    <article>
    <header id="h1">      </header>
    <section id="s1">
    <header>      </header>
    <p>      </p>
    </section>
    </article>
    //JSON    
    {
    "article": {
    "header": {
    "#text": "    ",
    "@id": "h1"
    },
    "section": {
    "@id": "s1",
    "header": "    ",
    "p": "    "
    }
    }
    }

Js 로 XML 을 JSON 의 스 크 립 트 로 바 꾸 고 인터넷 에서 기 존의 스 크 립 트 를 찾 았 지만 대부분 간단 한 상황 만 만족 시 키 고 원시 구조의 상호 전환 을 보장 할 수 없 었 다.다음은 인터넷 에서 찾 은 스 크 립 트 나 글 입 니 다.
　　x2js  : https://code.google.com/p/x2js/
　　jsonxml : http://davidwalsh.name/convert-xml-json
　　JKL.ParseXML : http://www.kawa.net/works/js/jkl/parsexml-e.html
x2js 는 아래 XML 을 정확하게 복원 하지 않 습 니 다.

//XML  
<p> <strong>  </strong> <em> </em> </p>

두 번 째 스 크 립 트 jsonxml 는 위 에 있 는 '텍스트 혼합 탭' 의 경우 탭 을 추출 하지 않 고 아래 형식 으로 변환 합 니 다.

{"p":"<strong>  </strong> <em> </em>"}}

그 후에 나 는 다음 과 같은 형식 으로 해석 한 후에 '텍스트 혼합 태그' 가 정확하게 복원 할 수 있 는 상황 을 만족 시 켰 다.

{"p":[{"strong":"  "}," ",{"em":" "}]}

또한 아래 코드 와 같이 위 에서 언급 한 스 크 립 트 를 사용 하여 변환 하면 복원 할 수 없 는 상황 을 초래 할 수 있 습 니 다.

<article>
    <section id="s1">   </section>
    <header id="h1">    </header>
    <section id="s2">   </section>
</article>

마찬가지 로 한 탭 에 하위 탭 이 한 번 이상 나 타 났 습 니 다. 데 이 터 를 기록 할 경로 가 필요 하 다 면 배열 로 이 구 조 를 저장 해 야 합 니 다.정확 한 코드 는:

 {
    "article": [ {
    "section": {
    "#text": "   ",
    "@id": "s1"
    },
    }, {
    "header": {
    "#text": "  ",
    "@id": "h1"
    }
    }, {
    "section": {
    "#text": "   ",
    "@id": "s2"
    }
    }
    ]
    }

　　jkl.parsexml

SAMPLE XML SOURCE: XML
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<items>
  <item>
    <zip_cd>10036</zip_cd>
    <us_state>NY</us_state>
    <us_city>New York</us_city>
    <us_dist>Broadway</us_dist>
  </item>
</items>
SAMPLE SCRIPT:
<script type="text/javascript" src="jkl-parsexml.js"></script>
<script><!--
    var url = "zip-e.xml";
    var xml = new JKL.ParseXML( url );
    var data = xml.parse();
    document.write( data["items"]["item"]["us_state"] );
    document.write( data.items.item.us_state );
// --></script>
OUTPUT JSON:
{
  items: {
    item: {
      zip_cd: "1000001"
      us_state: "NY",
      us_city: "New York",
      us_dist: "Broadway",
    }
  }
};

jsonxml

// Changes XML to JSON
function xmlToJson(xml) {
 
 // Create the return object
 var obj = {};
 if (xml.nodeType == 1) { // element
  // do attributes
  if (xml.attributes.length > 0) {
  obj["@attributes"] = {};
   for (var j = 0; j < xml.attributes.length; j++) {
    var attribute = xml.attributes.item(j);
    obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
   }
  }
 } else if (xml.nodeType == 3) { // text
  obj = xml.nodeValue;
 }
 // do children
 if (xml.hasChildNodes()) {
  for(var i = 0; i < xml.childNodes.length; i++) {
   var item = xml.childNodes.item(i);
   var nodeName = item.nodeName;
   if (typeof(obj[nodeName]) == "undefined") {
    obj[nodeName] = xmlToJson(item);
   } else {
    if (typeof(obj[nodeName].push) == "undefined") {
     var old = obj[nodeName];
     obj[nodeName] = [];
     obj[nodeName].push(old);
    }
    obj[nodeName].push(xmlToJson(item));
   }
  }
 }
 return obj;
};
The major change I needed to implement was using attributes.item(j) instead of the attributes[j] that most of the scripts I found used.  With this function, XML that looks like:
<ALEXA VER="0.9" URL="davidwalsh.name/" HOME="0" AID="=">
 <SD TITLE="A" FLAGS="" HOST="davidwalsh.name">
  <TITLE TEXT="David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else"/>
  <LINKSIN NUM="1102"/>
  <SPEED TEXT="1421" PCT="51"/>
 </SD>
 <SD>
  <POPULARITY URL="davidwalsh.name/" TEXT="7131"/>
  <REACH RANK="5952"/>
  <RANK DELTA="-1648"/>
 </SD>
</ALEXA>
...becomes workable a JavaScript object with the following structure:
{
 "@attributes": {
  AID: "=",
  HOME:  0,
  URL: "davidwalsh.name/",
  VER: "0.9",
 },
 SD = [
  {
   "@attributes": {
    FLAGS: "",
    HOST: "davidwalsh.name",
    TITLE: A
   },
   LINKSIN: {
    "@attributes": {
     NUM: 1102
    }
   },
   SPEED: {
    "@attributes": {
     PCT: 51,
     TEXT: 1421
    }
   },
   TITLE: {
    "@attributes": {
     TEXT: "David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else",
    }
   },
  },
  {
   POPULARITY: {
    "@attributes": {
     TEXT: 7131,
     URL: "davidwalsh.name/"
    }
   },
   RANK: {
    "@attributes": {
     DELTA: "-1648"
    }
   },
   REACH: {
    "@attributes": {
     RANK = 5952
    }
   }
  }
 ]
}

한참 동안 말 했 는데 다음 에 예 하 나 를 정리 하 였 다.

function xmlToJson(xml) {
// Create the return object 
var obj = {};
if (xml.nodeType == 1) { // element 
// do attributes 
if (xml.attributes.length > 0) { 
obj["@attributes"] = {}; 
for (var j = 0; j < xml.attributes.length; j++) { 
var attribute = xml.attributes.item(j); 
obj["@attributes"][attribute.nodeName] = attribute.nodeValue; 
} 
} 
} else if (xml.nodeType == 3) { // text 
obj = xml.nodeValue; 
}
// do children 
if (xml.hasChildNodes()) { 
for (var i = 0; i < xml.childNodes.length; i++) { 
var item = xml.childNodes.item(i); 
var nodeName = item.nodeName; 
if (typeof (obj[nodeName]) == "undefined") { 
obj[nodeName] = xmlToJson(item); 
} else { 
if (typeof (obj[nodeName].length) == "undefined") { 
var old = obj[nodeName]; 
obj[nodeName] = []; 
obj[nodeName].push(old); 
} 
obj[nodeName].push(xmlToJson(item)); 
} 
} 
} 
return obj; 
};