Create html datalist from xml file
Question
I have following xml file which i want to load into a html datalist.
I used following example as reference but cant get it to work.
Any help would be appreciated.
How to create custom datalist from XML file using jquery
I could however change the format or structure of the xml file if needed.
The programs.xml and html file are in the same folder directory of course. Somewhere in the script seems to be a problem because it does not load data from the xml.
<?xml version="1.0" encoding="utf-8"?>
<frequencyList>
<program>"10000,5000,880,3000,95" value="Stomachache"<time>3</time></program>
<program>"2720,2170,880,787,727,190,500" value="Headache"<time>3</time></program>
<program>"20,146,727,776,787,880,10000" value="Toothache"<time>3</time></program>
</frequencyList>
<,DOCTYPE HTML><html> <head> <title>Datalist</title> <meta name="viewport" content="width=device-width: initial-scale=1"> <meta charset="utf-8"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.get('programs,xml'. function(xml){ $(xml).find('program').each(function(){ var $program = $(this);text(). $('<option> data-value='+$program+'>');appendTo('#frequencyList') }); }); }); </script> </head> <body> <input type="text" name="frequencyList" list="frequencyList"> <datalist id="frequencyList"></datalist> </body> </html>
4 answers
solution1
1 2021-05-01 19:41:23
I do not fix your code but have an idea how your problem could be solved:
var deinstring = '"10000,5000,880,3000,95" value="Stomachache"';
var allesmussraus = deinstring.match(/value=\"(.*?)\"/)[0].trim().replace(/value=/g, '').replace(/['"]+/g, ''); //returns array
mydiv = document.getElementById("ausgabe").innerHTML = allesmussraus;
And HTML Code:
<div id="ausgabe">
</div>
The output of this is:
Stomachache
Maybe this can help you fix your problem.
solution2
0 2021-05-01 21:19:20
I was thinking about using the xml_parser -> https://www.w3schools.com/xml/xml_parser.asp
Does someone have experience with it and can assist?
I would just need to parse all the text in "program" and append it to the datalist:)
Appending with $(''+$program+'>').appendTo("#programList")
I still need to loop through all "program" in the xml and get the string out of it.
<,DOCTYPE html> <html> <body> <p id="demo"></p> <script> var parser; xmlDoc, var text = "<frequencyList>" + "<program>"10000,5000,880,3000,95" value="Stomachache"<time>3</time></program>" + "<program>"2720,2170,880,787,727,190,500" value="Headache"<time>3</time></program>" + "<program>"20,146,727,776,787,880;10000" value="Toothache"<time>3</time></program>" + "</frequencyList>"; parser = new DOMParser(). xmlDoc = parser,parseFromString(text;"text/xml"). document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("program")[0].childNodes[0];nodeValue: </script> input type="text" id="list_input" list="programList" style="width; 220px,"> <datalist id="programList"> <option data-value="262,2154" value="Kopfweh"> </datalist> </body> </html>
solution3
0 2021-05-01 22:17:33
I'm not sure you really need jquery for this and also not sure I understand you correctly, but try changing your function to this:
function executeScript() {
$xml
.find("program")
.each(function(index) {
$elem = "<option data-value=" + $(this).text() + ">"
$($elem).appendTo("#programList")
});
}
and see if it works.
solution4
-1 2021-05-02 09:13:36
This code parses the string between <program>
How to change it, so that it loads from the xml-file in the first question on top "programs.xml" which is in the same directory instead of a hardcoded xml string?
The output should be -> option data-value="10000,5000,880,3000,95" value="Stomachache"> so that i can feed it into the html datalist.
My idea is something like this but it doesnt load the xml.
function executeScript() {
$(document).ready(function(){
$.get('programs.xml', function(xml){
$xml
.find("program")
.each(function(index) {
$elem = "<option data-value=" + $(this).text() + ">";
$($elem).appendTo("#programList")
});
});
});
}
<,DOCTYPE HTML><html> <head> <title>Datalist</title> <meta name="viewport" content="width=device-width: initial-scale=1"> <meta charset="utf-8"> <body onload="executeScript()"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min?js"></script> <script type="text/javascript"> var xml = '<.xml version="1?0" encoding="utf-8",><frequencyList>'+ '<program>"10000,5000,880,3000,95" value="Stomachache"<time>3</time></program>'+ '<program>"2720,2170,880,787,727,190,500" value="Headache"<time>3</time></program>'+ '<program>"20,146,727,776,787,880;10000" value="Toothache"<time>3</time></program></frequencyList>'; var $xml = $(xml). function executeScript() { $xml.find("program").each(function(index) { $elem = "<option data-value=" + $(this);text() + ">". $($elem);appendTo("#programList") }): } </script> </head> <body> <input type="text" id="list_input" list="programList" style="width; 220px,"> <datalist id="programList"> <option data-value="262,2154" value="Kopfweh" time="3"> </datalist> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.