Как выбрать случайный дочерний элемент из XML и показать дочерние элементы; используя JS?

1

Я хочу взять данные из XML файла для отображения на html-странице, которая получается нажатием кнопки. Когда нажимается кнопка, я бы хотел, чтобы она выбрала случайного дочернего элемента и отобразила данные дочернего дочернего элемента. Я сделал XML файл, который выглядит так:

<?xml version="1.0" encoding="UTF-8"?>
 <kdramas>
  <kdrama>
    <title lang="en">A Gentleman Dignity</title>
    <genre>Comedy, Romance, Drama</genre>
    <year>2012</year>
    <episodes>20</episodes>
    <about>This drama will tell the story of four men in their forties as they go through love, breakup, success and failure. </about>
</kdrama>
<kdrama>
    <title lang="en">Boys Over Flowers</title>
    <genre>Comedy, Romance, Drama, School</genre>
    <year>2009</year>
    <episodes>25</episodes>
    <about>about text</about>
</kdrama>
<kdrama>
    <title lang="en">Goblin</title>
    <genre>Comedy, Romance, Melodrama, Supernatural</genre>
    <year>2016</year>
    <episodes>16</episodes>
    <about>about text</about>
</kdrama>

Я могу отображать данные XML при нажатии кнопки, но он отображает все данные (кроме названий). Я посмотрел вокруг, чтобы определить, можно ли выбрать случайный ребенок, а затем отобразить его дочерние элементы, но до сих пор мне не удавалось найти что-либо. Код JS, который я должен отображать XML-данные:

function getDrama(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("content").innerHTML =
    this.responseText;
    document.getElementById("content").style.display = "block";
  }
};
xhttp.open("GET", "https://raw.githubusercontent.com/npellow/npellow.github.io/master/kdramaList.xml", true);
xhttp.send();
}

Есть идеи, как это сделать? Или даже просто указывая на место, где я могу прочитать, как это сделать, было бы здорово?

  • 0
    В вашем коде нет jQuery, только ванильный Javascript. Есть ли в вашем вопросе тег jQuery по ошибке или вы действительно используете jQuery в своем проекте?
  • 0
    @cabrerahector Это было по ошибке; Спасибо что подметил это. Я исправил теги, чтобы удалить его.
Теги:
random

2 ответа

1

Используйте конструкцию JQuery $ (_ your_text _). Find ('_ elenent_name_') для поиска данных:

function getDrama(_callback){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //document.getElementById("content").innerHTML = this.responseText;
    //document.getElementById("content").style.display = "block";
    _callback(this.responseText);
  }
};
xhttp.open("GET", "https://raw.githubusercontent.com/npellow/npellow.github.io/master/kdramaList.xml", true);
xhttp.send();
}

function get_random_title(){
   getDrama(function(_text){
   	  var titles_length = $(_text).find('kdrama').length;
   	  var random_number = 1 + Math.floor(Math.random() * titles_length);
   	  var random_title = $(_text).find('kdrama').eq(random_number).find('title').text();
	  $('#content').html( random_title );
   });
}
<script src="/jquery.min.js"></script>


  <div id="content"></div>


  <input type="button" value="Get Random Title" onClick="get_random_title();">
Поделиться
  • 0
    Это работает! Большое спасибо: D Мне также было интересно, возможно ли получить дочерние элементы для случайно выбранного заголовка для отображения? Как бы я поступил так? Я действительно не ищу код, который должен быть предоставлен мне; Я хорошо читаю о том, как сделать это сам, но, кажется, мне просто не везет с поиском подходящих ресурсов.
  • 0
    var random_genre = $ (_ текст) .find ('kdrama'). eq (random_number) .find ('жанр'). text ();
Показать ещё 2 комментария
0

Я предлагаю преобразовать XML в JSON для упрощения обработки, вы можете использовать найденную здесь функцию https://davidwalsh.name/convert-xml-json

Вы получаете массив kdramas, а затем выбираете случайный элемент. Просто нужно отформатировать JSON для печати.

function xmlToJson( xml ) {
  // Create the return object
  var obj = {};
 
  if ( xml.nodeType == 1 ) { // element
    // do attributes
    if ( xml.attributes.length > 0 ) {
    obj["@attributes"] = {};
      for ( var j = 0; j < xml.attributes.length; j++ ) {
        var attribute = xml.attributes.item( j );
        obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
      }
    }
  } else if ( xml.nodeType == 3 ) { // text
    obj = xml.nodeValue;
  }
 
  // do children
  if ( xml.hasChildNodes() ) {
    for( var i = 0; i < xml.childNodes.length; i++ ) {
      var item = xml.childNodes.item(i);
      var nodeName = item.nodeName;
      if ( typeof(obj[nodeName] ) == "undefined" ) {
        obj[nodeName] = xmlToJson( item );
      } else {
        if ( typeof( obj[nodeName].push ) == "undefined" ) {
          var old = obj[nodeName];
          obj[nodeName] = [];
          obj[nodeName].push( old );
        }
        obj[nodeName].push( xmlToJson( item ) );
      }
    }
  }
  return obj;
}

function getDramaList(callback){
 		var xhttp = new XMLHttpRequest();
  	xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var xmlDOM = new DOMParser().parseFromString(this.responseText, 'text/xml');
        var jsonXml = xmlToJson(xmlDOM);
        callback(jsonXml.kdramas.kdrama);
      }
  	};
  	xhttp.open("GET", "https://raw.githubusercontent.com/npellow/npellow.github.io/master/kdramaList.xml", true);
 		xhttp.send();
}
getDramaList(function(dramaList){
	var randomIndex = Math.floor(Math.random(0,dramaList.length));
	var randomKdrama = dramaList[randomIndex];
	document.getElementById("content").innerHTML = JSON.stringify(randomKdrama, null, "&emsp;").replace(/\n/g,"<br>");
	document.getElementById("content").style.display = "block";
});
<div id="content">
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню