XML parse to HTML with jQuery - javascript

I have some little problem with my scripts. I want to parse xml file with some data elements to my html file. So I try to use jQuery but it doesn't work. Can you help me?
This is my xlm file:
<?xml version="2.0"?>
<choices xml:lang="PL">
<complete>Wskazówka</complete>
<temperature>300 stopni celcjusza</temperature>
</choices>
This is my jQuery code:
$(document).ready(function () {
$.get('../data/content_data.xml', function(data) {
var complete = $(data).find('complete').text();
var temperature = $(data).find('temperature').text();
$('div.menu_circle').text(complete + "|" + temperature);
});
});

I haven't tried this myself, but maybe it helps:
http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery

The issue is how try to output your variables. Try to append your variables to your element.
$(complete + "|" + temperature).appendTo('div.menu_circle');

Related

WebView2 ExecuteScriptAsync with XML input

I want to run a C# function using ExecuteScriptAsync() with XML text as input.
Something like that:
var xml = "<?xml version=\"1.0\" encoding=\"UTF - 16\" standalone=\"no\" ?><values>42</values>";
webView2Control.CoreWebView2.Navigate("file:///C:/Users/erezf/AppData/Local/Temp/index.html");
var input = "func(" + xml + ")";
await webView2Control.CoreWebView2.ExecuteScriptAsync(input);
The HTML file includes the function func:
<script id="test" type="text/javascript">
function func(xml) { alert(xml); }
</script>
This code doesn't work, why?
Your XML string being passed to the Javascript function is missing single or double quotes.
If you look at the input variable in the debugger, it will look like:
func(<?xml version="1.0" encoding="UTF - 16" standalone="no" ?><values>42</values>)
Simply add single quotes like this:
var xml = "'<?xml version=\"1.0\" encoding=\"UTF - 16\" standalone=\"no\" ?><values>42</values>'";
In my case the solution was:
1. add ' ' in the " ".
2. replace the "\n" with "\\n".

Parsing json from external url Html and JS only

<html>
<body>
<div id="output">hi</div>
</body>
<script>
var link="http://mywp.com/cilacap/api/get_posts/";
var jcontent= JSON.parse(link);
var output=document.getElementById('output');
output.innerHTML=jcontent.id' ';
</script>
</html>
It only shows "hi".
Can someone tell me how to show JSON items such as "id" and "postDate"
with looping but without PHP scripting?
Thanks
Few syntactical errors, below is the right one.
<html>
<body>
<div id="output">hi</div>
</body>
<script>
var link='{"url":"http://mywp.com/cilacap/api/get_posts/", "id":"url_id_01"}';
var jcontent= JSON.parse(link);
var output=document.getElementById('output');
output.innerHTML=jcontent.id + ' ';
</script>
</html>
JSON Data(var link), was not parsable.
JSON Data(var link), didnt contained any attribute called id.
String concatenation in last line(output.innerHTML), was wrong.
Try removing the quotes from:
output.innerHTML=jcontent.id' ';
and change it to:
output.innerHTML += jcontent.id;
Providing that the link is valid it should work now.
You can also write:
console.log(jcontent);
and check if the console displays the value, or any errors that have occurred.
That url is a string, not json.
Use Ajax to get the data ( using jquery)
var link;
$.ajax({
url: "test.html",
}).done(function(data) {
link = data;
});
Then, extract the data;
output.innerHTML=jcontent.id;
Is for the value. You get the key like this:
ES7
Object.entries(jcontent)
.forEach(keyValuePair =>
{
// Push to HTML
var t = document.createTextNode(keyValuePair[0] + ' : ' + keyValuePair[1]);     // Create a text node
output.appendChild(t);   
});
ES6
Object.keys(jcontent)
.map(key => [key, jcontent[key]])
.forEach(keyValuePair =>
{
// Push to HTML
var t = document.createTextNode(keyValuePair[0] + ' : ' + keyValuePair[1]);     // Create a text node
output.appendChild(t);   
});
ES5 (Most likely your case)
Use function instead of arrow functions for es5:
Object.keys(jcontent)
.map(function(key){ [key, jcontent[key]] })
.forEach(function(keyValuePair)
{
// Push to HTML
var t = document.createTextNode(keyValuePair[0] + ' : ' + keyValuePair[1]);     // Create a text node
output.appendChild(t);   
});
Access the value:
keyValuePair[0] // key
keyValuePair[1] // value
Ps
If you want to use the es7 or es6 method, have a look at babeljs

How to Reference XML File/Data to be Used with HTML and jQuery?

So I have an XML file, that I generated from an Excel file. Each item looks like this:
<item>
<partnum>pn0001</partnum>
<category>Parent Category</category>
<title>Item Name Here</title>
<type>T27</type>
<diameter>6"</diameter>
<width>0.045"</width>
<arbor>7/8"</arbor>
<material>Metal</material>
<maxrpm>13300</maxrpm>
<tool>Angle Grinder</tool>
<purpose>Cutting</purpose>
<brand>Brand Name Here</brand>
<imgsrc>localfolder\file.jpg</imgsrc>
</item>
I'd like to be able to reference this data, and create variables for each of the items. Obviously, I'll have to write a loop that will go through each item, and store the data. It will end up being something like pn0001.category, pn0001.title. etc, etc.
My question is: how do I begin to reference the XML file? I ran across this link: https://api.jquery.com/jQuery.parseXML/
Which is great, but in the code, you'll see that they have the XML data hard-coded as a string in the first variable.
Basically, how do I get the data from the XML into variables in either Javascript or jQuery?
Here is a jquery example
var xml = '<?xml version="1.0" encoding="UTF-8"?><items><item><partnum>pn0001</partnum><type>T27</type><material>Metal</material></item><item><partnum>pn0002</partnum><type>T28</type><material>plastic</material></item></items>';
var xmlDoc = $.parseXML(xml);
var $xml = $(xmlDoc);
$xml.find('item').each(function(index) {
var partnum = $(this).find('partnum').text();
var type = $(this).find('type').text();
var material = $(this).find('material').text();
$('<span>' + partnum + ' ' + type + ' ' + material + '</span><br>').appendTo('#output');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

Javascript Help Passing Data via URL

Hi I wonder if someone could help me with this small issue I have the following code which I need to modify.
<script type="text/javascript">
function code(id) {
$('#myStyle').load('myphp.php?id=' + id);
}
</script>
I need to pass another variable into this code and add it to the GET part of the URL for example above it will include the URL myphp.php?id=124545
I want to add a second variable called num to the URL part but am confused what the code will need to become to make the correct post via GET
<script type="text/javascript">
function code(id,num) {
$('#myStyle').load('myphp.php?id=' + id); // how do I add the &num=124 for example
}
</script>
Thanks in advance
Simple. Use:
$('#myStyle').load('myphp.php?id=' + id + '&num=' + num);
Reference: http://www.quirksmode.org/js/strings.html#conc
Hope it helps!
Concatenate "&num="+num onto the string you already have:
<script type="text/javascript">
function code(id,num) {
$('#myStyle').load('myphp.php?id=' + id + "&num=" + num); // how do I add the &num=124 for example
}
</script>

Adding javascript variable to hyperlink within script

I have been trying to create a hyperlink using a variable defined earlier in the same function to append:
var NAMEVARIABLE = responseArray[i].Name;
var TITLE_Game = document.createElement("p");
TITLE_Game.className = "TITLE_Game";
TITLE_Game.innerHTML = "<a href='Game_NAMEVARIABLE.html'>Games</a>";
I have tried the following using the solution found here: Passing Javascript variable to <a href >
Games
But that didn't work. I then tried adding an ID:
<a id="link" href="Game_.html?propid=">Games</a>
And adding this to the script: document.links["link"].href += NAMEVARIABLE;
This didn't work either. These links are occuring within Isotope, which I've run into newbie-problems making sure my JSON data is loading before the script executes. That's all working now, but I'm not sure if the reason the above methods aren't working is because of a similar issue, or if they simply are not the proper way to go about this.
Any help is much appreciated. Thank you
first of all, try debug your variable :
var NAMEVARIABLE = responseArray[i].Name;
alert(NAMEVARIABLE);
is it returning the desired return value or not.
and then the second thing, in your first style of script, try this instead :
TITLE_Game.innerHTML = "<a href='Game_"+NAMEVARIABLE+".html'>Games</a>";
I assumed you have (static) html collection with game_[number_id].html format
and if it's so, you can try further with your second style of script, and change it to this :
Games
you need to learn further about javascript strings concatenation
Use string concatenation to build up your inner html string.
Example:
var nameVariable = 'Foo';
var innerHtmlText = nameVariable + 'bar';
$('#someElement').html(innerHtmlText);
The contents of someElement will then contain the text: 'Foobar';
You just need string concatenation. modify link's href onclick would be considered as spam in most modern browser.
<div id="result">
the result:
</div>
<script type="text/javascript">
var name = "foo_bar";
var url = "page.html?key=" + name; //or.. "page_" + name + ".html";
var link = 'link here';
$("#result").addClass("g_title");
$("#result").append(link);
</script>
This can be achieved by either (i.e. pure JS or jQuery) ways without much hassle. Suppose you have this <a> element with some href
<a id="Link" href="/collection/categories/">Games</a>
Pure JavaScript way:
window.onload = function() {
var link= document.getElementById('Link'),
url = link.href + responseArray[i].Name + '.html';
link.setAttribute('href', url);
}
Using Jquery:
$(function(){
var link= $('#Link'),
url = link.attr('href') + responseArray[i].Name + '.html';
link.attr('href', url);
});

Categories

Resources