Как распарсить из xml файла данные в javascript?
Здравствуйте. Встала задача заполнить поля ввода формы из подгружаемого в input xml файла (или json возможно). То есть файл будет не с сервера, а локальный.
Вопрос с том, можно ли его прочитать а потом из xml формата вытянуть все в объект js, после чего уже вставить в поля формы?
Если да, то буду благодарен за инфу о последовательности действий и ньюансы, с которыми можно столкнуться при реализации. Спасибо
- Вопрос задан более трёх лет назад
- 6597 просмотров
Комментировать
Решения вопроса 1
Dima Polos @dimovich85 Куратор тега JavaScript
https://u-academy.net/
Для того, чтобы с локалки прочитать файл можно использовать
Для чтения самого файла можно изучить вот такой сниппет и переделать под себя, вместо того, чтобы в innerHTML присваивать — просто запомнить в переменную, например fileContent.
Для парсинга XML: здесь
Для JSON: JSON.parse( fileContent );
Ответ написан более трёх лет назад
Нравится 2 5 комментариев
Shurik @svisch Автор вопроса
Спасибо. То, что нужно. Но пытаюсь сделать у себя для теста этот пример — почему то выдает ошибку:
test.html:15 Uncaught TypeError: Cannot read property ‘addEventListener’ of null
Dima Polos @dimovich85 Куратор тега JavaScript
svisch, наверное потому что скопировали и не разобрались)
Shurik @svisch Автор вопроса
Dima Polos, наверное))))
Ошибку выше уже исправил, но ничего не выводится у меня) Ладно, посижу поразбираюсь. Спасибо)
XML парсер и объект XMLHttpRequest
Все современные браузеры имеют встроенный XML парсер.
Этот XML парсер преобразует XML документ в объект XML DOM, которым затем можно манипулировать при помощи JavaScript.
XML парсер
XML DOM (Объектная модель документа) определяет свойства и методы для доступа и редактирования XML.
Но прежде, чем получить доступ к XML документу, его необходимо загрузить в объект XML DOM.
У всех современных браузеров есть встроенный XML парсер, который умеет преобразовывать текст в объект XML DOM.
Парсинг текстовой строки
Следующий пример парсит текстовую строку в объект XML DOM и извлекает информацию из него при помощи JavaScript:
Объяснение примера
Определяется текстовая строка:
text = "" + "Everyday Italian " + "Giada De Laurentiis " + "2005 " + "
Создается парсер XML DOM:
parser = new DOMParser();
Парсер создает новый объект XML DOM используя текстовую строку:
xmlDoc = parser.parseFromString(text,"text/xml");
Объект XMLHttpRequest
Объект XMLHttpRequest позволяет обмениваться данными в фоновом режиме.
Все современные браузеры имеют встроенный объект XMLHttpRequest для обмена данными с сервером.
Это настоящая сбывшаяся мечта разработчика, потому что вы можете:
- Обновлять содержимое веб-страницы не перезагружая веб-страницу
- Запрашивать данные с сервера, когда веб-страница уже загружена
- Получать данные с сервера, когда веб-страница уже загружена
- Посылать данные на сервер в фоновом режиме
Отправка объекта XMLHttpRequest
Стандартный код JavaScript для использования объекта XMLHttpRequest выглядит следующим образом:
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() < if (this.readyState == 4 && this.status == 200) < // Типичное действие, выполняемое, когда документ готов: document.getElementById("demo").innerHTML = xhttp.responseText; >>; xhttp.open("GET", "filename", true); xhttp.send();
Объяснение примера
На первой строке примера создается объект XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Свойство onreadystatechange определяет функцию, которая будет выполняться каждый раз, когда статус объекта XMLHttpRequest изменится:
xhttp.onreadystatechange = function()
Когда свойство readyState равно 4, и свойство status равно 200, ответ готов:
if (this.readyState == 4 && this.status == 200)
Свойство responseText возвращает ответ сервера в виде текстовой строки.
Эта текстовая строка может использоваться для изменения кода веб-страницы:
document.getElementById("demo").innerHTML = xhttp.responseText;
Более подробно об объекте XMLHttpRequest читайте в главе AJAX — Объект XMLHttpRequest нашего Учебника по Javascript.
Парсинг через объект XMLHttpRequest
У объекта XMLHttpRequest есть свой встроенный XML парсер.
Свойство responseText возвращает ответ сервера в виде строки.
Свойство responseXML возвращает ответ сервера в виде объекта XML DOM.
Если вы хотите использовать объект XML DOM, то вы можете использовать свойство responseXML.
Запрашиваем файл cd_catalog.xml и используем ответ как объект XML DOM;
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() < if (this.readyState == 4 && this.status == 200) < xmlDoc = xmlhttp.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("ARTIST"); for (i = 0; i < x.length; i++) < txt += x[i].childNodes[0].nodeValue + "
"; > > >; xhttp.open("GET", "cd_catalog.xml", true); xhttp.send(); document.getElementById("demo").innerHTML = txt;
Доступ к данным на других доменах
Из-за соображения безопасности современные браузеры не допускают возможности обращаться к данным на других доменах.
Это означает, что веб-страница и XML файл, который она пытается загрузить, должны находиться на одном и том же сервере.
Прямая и обратная обработка XML
Иногда возникает необходимость в обработке XML и в последующей конвертации в древо DOM. Или наоборот, необходимо перевести древо DOM в XML. В этой статье рассмотрим объекты платформы web для обработки XML.
Сериализует деревья DOM, преобразуя их в строки, содержащие XML.
Создаёт дерево DOM, анализируя строку, содержащую XML, возвращая XMLDocument или Document в зависимости от входящих данных.
Загружает контент из URL-адреса; Содержимое XML возвращается как объект XML Document с деревом DOM, построенным из самого XML.
Технология создания строк, содержащих адреса для определённых частей документа XML, и поиска узлов XML на основе этих адресов.
Создание XML-документа
Использование одного из следующих подходов для создания XML-документа (который является экземпляром Document .
Parsing строк в дерево DOM
В этом примере фрагмент XML в строке преобразуется в дерево DOM с помощью DOMParser :
var sMyString = 'hey!'; var oParser = new DOMParser(); var oDOM = oParser.parseFromString(sMyString, "application/xml"); // print the name of the root element or error message console.log( oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName, );
Parsing URL-addressable ресурсов в дерево DOM
Использование XMLHttpRequest
Вот пример кода, который считывает и анализирует XML-файл с URL-адресом в дереве DOM:
var xhr = new XMLHttpRequest(); xhr.onload = function () dump(xhr.responseXML.documentElement.nodeName); >; xhr.onerror = function () dump("Error while getting XML."); >; xhr.open("GET", "example.xml"); xhr.responseType = "document"; xhr.send();
Значение, возвращаемое в поле responseXML объекта xhr, является Document , созданным путём синтаксического анализа XML.
Если документ представляет собой HTML, приведённый выше код вернёт Document . Если документ XML, результирующий объект на самом деле является XMLDocument . Эти два типа по существу одинаковы; разница в основном историческая, хотя дифференциация имеет также некоторые практические преимущества.
Примечание: Примечание: на самом деле существует интерфейс HTMLDocument , но это не обязательно независимый тип. В некоторых браузерах это так, а в других это просто псевдоним для интерфейса документа.
Сериализация XML-документа
Имея Document , вы можете сериализовать дерево DOM документа обратно в XML с помощью метода XMLSerializer.serializeToString () .
Используйте следующие подходы для сериализации содержимого XML-документа, созданного в предыдущем разделе.
Serializing DOM trees to strings
Сначала создайте дерево DOM, как описано в разделе Как создать дерево DOM. В качестве альтернативы используйте дерево DOM, полученное из XMLHttpRequest .
Чтобы сериализовать документ дерева DOM в текст XML, вызовите XMLSerializer.serializeToString () :
var oSerializer = new XMLSerializer(); var sXML = oSerializer.serializeToString(doc);
Serializing HTML documents
Если у вас есть модель DOM в виде HTML-документа, вы можете сериализовать её с помощью serializeToString (), но есть более простой вариант: просто используйте свойство Element.innerHTML (если вам нужны только потомки указанный узел) или свойство Element.outerHTML , если вам нужен узел и все его потомки.
var docHTML = document.documentElement.innerHTML;
В результате docHTML представляет собой DOMString , содержащий HTML-код содержимого документа; то есть содержимое элемента .
Вы можете получить HTML, соответствующий и его потомкам, с помощью этого кода:
var docHTML = document.documentElement.outerHTML;
See also
- XPath
- XMLHttpRequest
- Document , XMLDocument , and HTMLDocument
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Распарсить строку в XML на Python
Я пытался вначале сделать с помощью Lxml.etree , потом пробовал с помощью регулярки, так ничего и не получилось. Подскажите примером кода или дайте ссылку где почитать (может литературу). Стоит ли вообще привязываться к XML или работать как с обычным текстовым файлом?
Отслеживать
9,637 9 9 золотых знаков 24 24 серебряных знака 35 35 бронзовых знаков
задан 11 мая 2020 в 18:43
3 2 2 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Для примера взял стандартный парсер xml.etree.ElementTree
Xml может выглядеть как угодно, но для простоты пусть будет такая структура:
xml = ''' 36, 37, 38,42 36, 42 ''' # импорт либы с синонимом import xml.etree.ElementTree as ET root = ET.fromstring(xml) # Найдем все offer на любой глубине for offer in root.findall('.//offer'): # Получаем значение и разбиваем его в массив values = offer.find('param').text.split(',') # Очистка родителя offer.clear() for v in values: # Создаем новый дочерний узел param = ET.SubElement(offer, 'param') # Добавляем ему атрибут param.set('name', 'Размер') # Устанавливаем значение param.text = v.strip() # убираем лишние пробелы справа и слева от значения # Вывод результата в консоль ET.dump(offer)