Я сделал ошибки, так что вам не придется. Узнайте, как зацикливать и анализировать данные из XML-файла и помещать их в HTML-файл. Это прекрасно работает, когда вы создаете таблицы, которым нужна самая свежая информация из источника, которым вы не владеете. В этом случае я извлек и отобразил данные для местной лиги софтбола в Wordpress из незащищенного XML-файла, чтобы они обновлялись после каждого раунда матчей.

Моя местная лига по софтболу поручила мне разместить на нашем сайте Wordpress актуальные таблицы для различных дивизионов. Это должно было показать название команды, положение команды в таблице относительно других команд и очки, которые каждая из них набрала. Мы являемся лигой Британской федерации софтбола, которые отображают результаты в своих собственных таблицах, таких как эта, и чей разработчик любезно предоставил нам XML-файл (ty!), который был создан с использованием документации, предоставленной их данными. провайдер.

Проанализировав файл JSON раньше, мне нужно было с чего-то начать.

И это также привело меня к моему первому вызову. Я анализирую XML, а не JSON, поэтому столкнулся с первой ошибкой.

Простое исправление — я заменил response.json на response.text. Бинго, я в пути, у меня есть данные:

Теперь следующая проблема — как вы на самом деле анализируете эти данные? Я не знал, но я знал, что интернет сделал. Процесс поиска ответа на вашу техническую проблему (когда вы новичок), будь то разбор XML-файла или что-то другое, сводится к пробам и ошибкам — вы должны найти, опробовать и протестировать несколько решений, чтобы найти код, который вы можете понять и что вы можете заставить работать. Итак, следующая часть моего метода пришла из W3 Schools and XML parsing, где я должен манипулировать данными и анализировать их.

Успех! У меня есть документ в консоли!

Следующая задача: показать отдельные команды в консоли, чтобы я знал, где лежат мои данные. Я использовал «getElementsByTagName («Команда»)», поскольку «Команда» была тегом, указанным в файле XML.

Затем я применил это к переменной «Команды», чтобы я мог перебирать их одну за другой, а также создал 3 другие переменные для названия команды, позиции и накопленных очков. Для этого вам нужно будет создать цикл for, увеличивая каждый раз на единицу длину «Teams».

Для получения значений переменных консоль разработчика предоставляет очень удобный инструмент. Используйте стрелки рядом с отдельной командой, чтобы развернуть данные, найдите данные, которые вы хотите получить (в случае названия команды: команда › атрибуты › имя › значение) и наведите на них указатель мыши (не показано). Это даст вам

Это сложная часть, сделано.

Заключительной частью было отображение их в таблице. Я начал с шаблона HTML-таблицы с тремя заголовками столбцов,

и моя цель состояла в том, чтобы добавить строку таблицы для имени, позиции и очков каждой команды. Для этого я создал постоянную переменную с именем «строка», где я буду вводить переменную позиции, команды и очков в каждую ячейку таблицы/данные таблицы (td).

Теперь самое интересное: давайте возьмем данные из консоли разработчика и поместим их в HTML. Вы увидите, что я начал свое тело таблицы, пометив его идентификатором «результаты». Чтобы Javascript знал, где начинать размещать мои новые строки HTML, я создал постоянную переменную под названием «результаты» и установил ее в селектор запроса. Последняя часть заключалась в том, чтобы вставить мои строки после идентификатора тела таблицы «результаты», используя метод «insertAdjacentHTML («beforend», HTML для внедрения)

И вуаля, полный окончательный фрагмент кода, чтобы заставить его работать:

Дополнительно: на нашем сайте Wordpress используется сертификат SSL, а я загружал данные с небезопасного сайта (видите, ссылка bsf.spawtz — только http?!). Чтобы наш безопасный сайт мог получать данные от Spawtz, я добавил «s» в конце http, чтобы сделать его безопасным. Надеюсь, этот метод сработает и для вас.