recherche
Maisoninterface WebQuestions et réponses frontalesComment convertir un objet en fichier XML en javascript

Dans le développement front-end, nous avons souvent besoin de convertir des objets JavaScript en fichiers XML pour faciliter le partage de données dans différentes applications. Bien qu'il soit possible d'écrire manuellement du code pour générer du XML, cette méthode prend du temps et est sujette aux erreurs. Par conséquent, cet article présentera plusieurs méthodes pour convertir des objets JavaScript en fichiers XML. J'espère qu'il vous sera utile.

Méthode 1 : Utiliser la bibliothèque js2xmlparser

js2xmlparser est une bibliothèque permettant de convertir des objets JavaScript en chaînes XML. Il est facile à utiliser, prend en charge n'importe quel attribut et hiérarchies imbriquées, et gère des problèmes tels que les caractères spéciaux lors de la sortie XML.

Installation :

Utiliser l'installation npm :

npm install js2xmlparser

Utiliser l'installation de fil :

yarn add js2xmlparser

Exemple d'utilisation : #🎜🎜 #

const parser = require('js2xmlparser');

const object = {
    name: 'John Smith',
    age: 30,
    email: 'john.smith@example.com'
};

const xml = parser.parse('person', object);
console.log(xml);
Sortie :

<?xml  version="1.0" encoding="UTF-8"?>
<person>
  <name>John Smith</name>
  <age>30</age>
  <email>john.smith@example.com</email>
</person>
Méthode 2 : Épisser manuellement les chaînes XML

Si vous ne souhaitez pas utiliser une bibliothèque tierce, vous pouvez également manuellement épisser des chaînes XML. Voici un exemple de code qui convertit les objets JavaScript en fichiers XML :

function objectToXml(obj, rootName) {
  let xml = '';

  // 添加 XML 声明
  xml += '<?xml  version="1.0" encoding="UTF-8"?>';

  // 添加根元素标签
  xml += ``;

  // 遍历对象属性,添加元素标签和属性
  for (const property in obj) {
    if (obj.hasOwnProperty(property)) {
      xml += '';

      if (typeof obj[property] === 'object') {
        xml += objectToXml(new Object(obj[property]));
      } else {
        xml += obj[property];
      }

      xml += '' + property + '>';
    }
  }

  // 添加根元素闭合标签
  xml += `${rootName}>`;

  return xml;
}

const obj = {
  name: 'John',
  age: 30,
  dateOfBirth: {
    year: 1990,
    month: 3,
    day: 15
  }
};

const xml = objectToXml(obj, 'person');
console.log(xml);
Sortie :

<?xml  version="1.0" encoding="UTF-8"?>
<person>
  <name>John</name>
  <age>30</age>
  <dateofbirth>
    <year>1990</year>
    <month>3</month>
    <day>15</day>
  </dateofbirth>
</person>
Méthode 3 : Utiliser l'API XMLSerializer

XMLSerializer Oui Une API JavaScript intégrée pour sérialiser les arborescences DOM en chaînes XML. Par conséquent, nous pouvons atteindre l'objectif de convertir un objet JavaScript en un fichier XML en créant une arborescence DOM contenant notre objet JavaScript. Voici un exemple de code :

function objectToXml(obj, rootName) {
  const dom = document.createElement(rootName);

  for (const property in obj) {
    if (obj.hasOwnProperty(property)) {
      const element = document.createElement(property);

      if (typeof obj[property] === 'object') {
        element.appendChild(objectToXml(new Object(obj[property]), property));
      } else {
        const value = document.createTextNode(obj[property]);
        element.appendChild(value);
      }

      dom.appendChild(element);
    }
  }

  return dom;
}

const obj = {
  name: 'John',
  age: 30,
  dateOfBirth: {
    year: 1990,
    month: 3,
    day: 15
  }
};

const xmlSerializer = new XMLSerializer();
const xml = xmlSerializer.serializeToString(objectToXml(obj, 'person'));
console.log(xml);
Sortie :

<person>
  <name>John</name>
  <age>30</age>
  <dateofbirth>
    <year>1990</year>
    <month>3</month>
    <day>15</day>
  </dateofbirth>
</person>
Conclusion

Cet article présente trois méthodes pour convertir des objets JavaScript en fichiers XML. La première méthode utilise la bibliothèque js2xmlparser, simple à utiliser et puissante. La deuxième méthode consiste à fusionner manuellement les chaînes XML. Si vous ne souhaitez pas installer de bibliothèque tierce, vous pouvez choisir cette méthode. La troisième méthode consiste à utiliser l'API XMLSerializer, qui nécessite la création d'une arborescence DOM à implémenter, mais si vous utilisez souvent des opérations DOM dans votre travail, cette méthode peut vous convenir davantage. J'espère que cet article vous aidera à trouver la méthode de conversion qui vous convient.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
CSS: Puis-je utiliser plusieurs ID dans le même DOM?CSS: Puis-je utiliser plusieurs ID dans le même DOM?May 14, 2025 am 12:20 AM

Non, vous ne devriez pas usermipleidsIntheSamedom.1) idsmustBeUniqueperhtmlSpecification, et en utilisant la construction de la consommation de Browsserbehavior.2)

Les objectifs de HTML5: Création d'un Web plus puissant et plus accessibleLes objectifs de HTML5: Création d'un Web plus puissant et plus accessibleMay 14, 2025 am 12:18 AM

Html5aimStoenhancewebcapabilities, faisant lamorenamique, interactive et accessible.1)

Objectifs importants de HTML5: Amélioration du développement Web et de l'expérience utilisateurObjectifs importants de HTML5: Amélioration du développement Web et de l'expérience utilisateurMay 14, 2025 am 12:18 AM

Html5aimStoenhanceWebDevelopmentAndUserexpericethroughseManticStructure, MultimediaEntegration, andperformance Improvements.1) SemanticElelementslike ,,, et improvereadability and accesssibility.2) andtagsallowsamlessmultimeMeddingWithoutPlugins.3) featrUr

HTML5: Est-ce sécurisé?HTML5: Est-ce sécurisé?May 14, 2025 am 12:15 AM

Html5isnotinherelyinsecure, maisitsfeaturescanleadtosecurityRissiSiSUSUSEUSORIMPROPERLYIMPLEMED.1) USETHESANDBOXATTRIBUSINIFRAMESTOCONTROLEMEDDEDENTTANTANDPREVERVULNERNERABILITSIKECLICKJACKING.2)

Objectifs HTML5 par rapport aux versions HTML plus anciennesObjectifs HTML5 par rapport aux versions HTML plus anciennesMay 14, 2025 am 12:14 AM

Html5AmemedtoenhanceWebDevelopmentByIntroducingSémanticElements, nativeMultimeDiSupport, amélioré des formulaires et offinecapabilities, contraste avec des émimitations de html4andxhtml.1)

CSS: Est-il mauvais d'utiliser le sélecteur d'ID?CSS: Est-il mauvais d'utiliser le sélecteur d'ID?May 13, 2025 am 12:14 AM

L'utilisation de sélecteurs d'ID n'est pas intrinsèquement mauvaise dans CSS, mais doit être utilisée avec prudence. 1) Le sélecteur d'ID convient aux éléments uniques ou aux crochets JavaScript. 2) Pour les styles généraux, les sélecteurs de classe doivent être utilisés car ils sont plus flexibles et maintenables. En équilibrant l'utilisation de l'ID et de la classe, une architecture CSS plus robuste et plus efficace peut être mise en œuvre.

HTML5: buts en 2024HTML5: buts en 2024May 13, 2025 am 12:13 AM

Html5'sgoalsin2024focusonrefinementandoptimisation, notnewfeatures.1) améliorer la performance des effectifs par rapport à la disposition

Quels sont les principaux domaines où HTML5 a essayé de s'améliorer?Quels sont les principaux domaines où HTML5 a essayé de s'améliorer?May 13, 2025 am 12:12 AM

Html5aimedtoimpovewebdevelopmentInfourkeyareas: 1) multimédiasupport, 2) sémanticstructure, 3) forcapabilities, and4) offlineandstorageoptions.1) html5 introdate

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Nordhold: Système de fusion, expliqué
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

PhpStorm version Mac

PhpStorm version Mac

Le dernier (2018.2.1) outil de développement intégré PHP professionnel

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles