Как можно прочитать и получить данные из XML-файла в JavaScript?
Доброго времени суток! В данной статье я покажу Вам как можно прочитать и получить данные из XML-файла в JavaScript.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Tasks</title>
</head>
<body>
<template id="tasksTable">
<table class="table" id="tasks">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Задача</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<!-- Task Table Row -->
</tbody>
</table>
</template>
<div class="container">
<div class="jumbotron mt-3" style="text-align: center;">
<h1 id="headerTitle">Список задач</h1>
</div>
<div id="app"></div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
XML-файл с данными:
<?xml version="1.0" encoding="utf-8" ?>
<tasks>
<task id="1">
<name>Научиться работать с XML в JavaScript</name>
<description>
Надо посмотреть как открыть, записать и сохранить значение в XML файл на JS
</description>
</task>
<task id="2">
<name>Научиться работать с XML в JavaScript</name>
<description>
Надо посмотреть как открыть, записать и сохранить значение в XML файл на JS
</description>
</task>
<task id="3">
<name>Научиться работать с XML в JavaScript</name>
<description>
Надо посмотреть как открыть, записать и сохранить значение в XML файл на JS
</description>
</task>
</tasks>
JavaScript код
'use strict';
/**
* Main entry
*/
$(function () {
let
app = $('#app'), // ссылка на контейнер приложения
tasksTable = document.querySelector('#tasksTable'), // ссылка на базовый шаблон списка задач
tasksFile = 'tasks.xml'; // файл с задачами
// GET запрос на получение данных из xml файла
const RequestObject = {
url: tasksFile,
method: 'GET',
dataType: 'xml',
async: true,
success: (resp) => {
// при успешном выполнении запроса
let tableRow = '';
// найти все задачи и пройтись по ним
// сформировав заполненный данными html шаблон
$(resp).find('task').each((index, item) => {
// получаем ссылку на задачу
const _item = $(item);
// и вытаскиваем из нее данные
const
id = _item.attr('id'),
name = _item.find('name').text().trim(),
desc = _item.find('description').text().trim()
//console.log(id, name, desc)
// формируем шаблон
tableRow += `
<tr>
<th scope="row">${id}</th>
<td class="tr-edit">${name}</td>
<td class="tr-edit">${desc}</td>
</tr>
`
});
// добавляем в текст страницы содержимое базового шаблона
app.html(tasksTable.content);
let tasks = $('#tasks');
tasks.find('tbody').html(tableRow)
},
// ошибку выводим в консоль
error: (error) => console.log(error)
}
// здесь непосредственно выполняем запрос
$.ajax(RequestObject);
});
Вот таким образом, мы можем прочитать XML-файл в JavaScript.
-
Создано 30.07.2020 10:50:10
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.