Как прочитать XML-файл (data.xml) в React JS? - PullRequest
Новая
       21

Как прочитать XML-файл (data.xml) в React JS?

0 голосов
/ 05 ноября 2019

Я попытался прочитать XML-файл и проанализировать его с помощью библиотеки react-xml-parser. 

 var XMLParser = require('react-xml-parser');
 var xml = new XMLParser().parseFromString(xml_string);
 console.log(xml);
 console.log(xml.getElementsByTagName('Row'));

Здесь он должен читать из строки, но мне нужно получить его из файла. Мой XML-файл находится в каталоге: xmldata/list.xml, поэтому я не знаю, как это сделать.

попробовал этот код: 

import XMLData from '../../xmldata/list.xml';
function ReadData() {
          var jsonDataFromXml = new XMLParser().parseFromString(XMLData);
          console.log(jsonDataFromXml);
          console.log(jsonDataFromXml.getElementsByTagName('Row'));

        }
    }
}

папка структуры 

-src
   |—views
        |—AdminScreen
               |—AdminScreen.js <-here used list.xml
   |—xmldata
           |—list.xml

но результат: 

bundle.js:81 Uncaught TypeError: Cannot set property 'value' of undefined
    at bundle.js:81
    at Array.map (<anonymous>)
    at e.value (bundle.js:76)
    at e.value (bundle.js:148)
    at ReadData (AdminScreen.js:36)
    at AdminScreen (AdminScreen.js:14)
    at renderWithHooks (react-dom.development.js:15821)
    at mountIndeterminateComponent (react-dom.development.js:18141)
    at beginWork$1 (react-dom.development.js:19357)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:466)
    at beginWork$$1 (react-dom.development.js:24570)
    at performUnitOfWork (react-dom.development.js:23505)
    at workLoopSync (react-dom.development.js:23480)
    at renderRoot (react-dom.development.js:23155)
    at scheduleUpdateOnFiber (react-dom.development.js:22653)
    at scheduleRootUpdate (react-dom.development.js:25686)
    at updateContainerAtExpirationTime (react-dom.development.js:25712)
    at updateContainer (react-dom.development.js:25812)
    at react-dom.development.js:26370
    at unbatchedUpdates (react-dom.development.js:22952)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26369)
    at Object.render (react-dom.development.js:26460)
    at Module../src/index.js (index.js:30)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (index.js:2)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Ответы [ 2 ]

1 голос
/ 05 ноября 2019

Попробуйте следующий код. 

import xmlData from '../../xmldata/list.xml';
import XMLParser from 'react-xml-parser';

var jsonDataFromXml = new XMLParser().parseFromString(xmlData);

list.xml 

<?xml version='1.0' encoding='utf-8'?>
<?xml-stylesheet type="text/xsl" href="ACSPIXMT.xsl" ?>

<Library>
   <Books count='1'>
       <Book id='1'>
           <Name>Me Before You</Name>
           <Author>Jojo Moyes</Author>
       </Book>
   </Books>
   <Music count=1>
       <CD id='2'>
           <Name>Houses of the Holy</Name>
           <Artist>Led Zeppelin</Artist>
       </CD>
   </Music>
</Library>

Ваши данные будут в переменной 'jsonDataFromXml'.

Примечание:

Если ваши данные находятся в каталоге src, используйте соответствующий путь и раскомментируйте «Предложение 2», в противном случае раскомментируйте «Предложение 1», если ваша папка параллельна папке src.

Лучше проверить данныесрок действия также в случае, если это не файл XML все время.

1 голос
/ 05 ноября 2019

Если ваши данные поступают из серверной части, вы можете напрямую использовать эти данные как xml_data. Но в вашем случае вы пытаетесь импортировать данные из файла .XML, но я не нашел никакого способа доступаXML-файл напрямую реагирует.

Решение:

Вам необходимо создать xml_data.js файл, подобный приведенному ниже, который импортирует ваши данные XML 

const xml_data = `<?xml version='1.0' encoding='utf-8'?>
<?xml-stylesheet type="text/xsl" href="ACSPIXMT.xsl" ?>

<Library>
   <Books count='1'>
       <Book id='1'>
           <Name>Me Before You</Name>
           <Author>Jojo Moyes</Author>
       </Book>
   </Books>
   <Music count=1>
       <CD id='2'>
           <Name>Houses of the Holy</Name>
           <Artist>Led Zeppelin</Artist>
       </CD>
   </Music>
</Library>`
    
export default xml_data;

Import xml_data from 'path of your xml file';
var xml = new XMLParser().parseFromString(xml_data);

Надеюсь, это поможет вам. Дайте мне знать, если у вас возникнут проблемы.

...