We are working with the facebook api and have stored the data retrieved in a JSON format into an array. We would like to display this information in a different HTML page but are unable to do so, please help regarding this?
<p id="demo"></p>
<script> var str=""; var names1 = new Array(); //creating names1 array
getFriendsList = function() { //calling from another function
FB.api('me/taggable_friends', function(response) {
for (var i = 0; i <= response.data.length; i++) {
names1.push(response.data[i].name); str=str+"<br>"+"<br>"+names1[i]; //appending thenames to str
document.getElementById("demo").innerHTML = str;//displaying the element in the html page.
}
});
} </script>
I am still a little confused by your question, but I am assuming that you want to know how to display the elements from an array onto your HTML page.
If this isn't what you are asking, then just expand on your question and I will see how I can help.
Explanation for code below
You are accessing your JavaScript file in your HTML by adding the <script type="text/javascript" src="app.js"></script> reference.
The JavaScript is creating a simple array called myArray. We then loop through our array and display content using the document.write(...); line.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
JavaScript
var myArray = [1, 2, 3];
// for each loop
for (var i in myArray) {
document.write(myArray[i]);
}
Related
I'm new to Javascript and have been spinning on writing this piece of code in order to display a series of pictures on a page from an external source, sort of like an instagram feed, using a GET request through jQuery. I have been given a JSON file that contains an array of image URLs, some of which I want to exclude because they are broken.
Here is the code that I've written thus far - I've tested it and it doesn't work and I'm looking for some guidance on what aspects I may be missing in order to get my code to work:
$(document).ready(function () {
$('imagesFromJSON').click(function () {
$.getJSON("images.json", function (data) {
var arrItems = []; // The array to store JSON items.
$.each(data, function (index, value) {
arrItems.push(value); // Push values in the array.
});
for (let i = 0; i < arrItems.length; i++) {
if (arrItems[i].contains('fakeurl') === false) {
let img = document.createElement('img');
img.src = arrItems[i].Image
document.querySelector('.container').appendChild(image)
}
}
});
});
});
<html>
<head>
<meta charset="UTF-8">
<title>Feed Test</title>
<script type='text/javascript' src='feed.js'></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>FEED TEST</h1>
<p><input type="button" id= "imagesFromJSON" value="Show Images" /></p>
<div class="container"></div>
</body>
</html>
I would like to check using liquid language, if is there somewhere in the page, a script being called twice or more.
For example:
<script src="myscripts.js"></script>
<script src="myscripts.js"></script>
Is it possible using liquid or should I use javascript to validate?
I'm not sure about liquid, but if you wanted to go the JS route, this could work:
//locate all `<script>` tags and save the elements into an array
var scriptTags = [];
document.querySelectorAll('script').forEach(function(tag) {
scriptTags.push(tag)
});
//Put just the URLs of the script tags into an array
var scriptUrls = scriptTags.map(function(tag) {
return tag.src;
});
//Get a list of any URL that appears more than once
var duplicateUrls = scriptUrls.filter(function(url, i) {
return scriptUrls.indexOf(url) != i;
});
console.log(duplicateUrls);
<script src="dupe.js"></script>
<script src="other1.js"></script>
<script src="dupe.js"></script>
<script src="other2.js"></script>
<script src="other3.js"></script>
I'm trying to create an HTML page that allows the user to input integers into a stored array using a button and then search that array for the inputted integers using another button. I am very confused and new to coding so any help would be much appreciated!
Try this out
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="data">[]</p>
<input id="inputNumber" value="0"/> <button id="pushBtn" onclick="push()">PUSH</button>
<input id="findNumber" value="0"/> <button id="pushBtn" onclick="find()">FIND</button>
<script>
var data = [];
function push(e) {
var toAdd = document.getElementById("inputNumber").value;
data.push(toAdd);
refresh();
}
function find(e) {
var toFind = document.getElementById("findNumber").value;
for(var i=0; i < data.length; i++){
if(data[i]==toFind) return alert("found at "+i);
}
return alert("couldn't find that number");
}
function refresh(){
document.getElementById("data").innerHTML = data;
}
</script>
</body>
</html>
Basically, I'm just using using the buttons to call the functions within the script that handles insertion and query for me. Additionally a refresh function is there to refresh the newly added data
I am trying to learn web programming and Javascript.
I'm trying to take whatever the user copied from an Excel spreadsheet and create a JavaScript spreadsheet/table that includes dropdowns out of it.
So basically the user would paste the input into a blank field, press the submit button, and JavaScript would generate an Excel-like spreadsheet which would have the data sorted accordingly. The dropdowns would be at the top of each column and allow the user to select either ready/not ready. This is being designed for a confluence WIKI page.
This is what I have so far, right now the code parses the input-field and creates a multi-dimensional array. After that, the array will be logged on the console. I need help getting everything displayed on the wiki page.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<textarea id="textarea"></textarea>
<button id="loadPaste">parse</button>
<script type="text/javascript">
var excel = new Array();
$(document).ready(function() {
$('#loadPaste').click(function() {
var text = $('#textarea').val();
var rows = text.split("\n");
for (var i = 0; i < rows.length; i++) {
excel[i] = rows[i].split("\t");
}
console.log(excel);
});
});
</script>
</body>
</html>
Lets close this one: //THIS IS #Downgoat response with little explanation about xml parser.
use an xml parser var xml = (new DOMParser()).parseFromString($('#textarea').val(), 'text/xml')
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
<html>
<body>
<p id="demo"></p>
</body>
</html>
I am kind of stuck in weird problem. i cant find the problem with the following code
<html>
<head>
<script type="text/javascript">
// Import GET Vars
document.$_GET = [];
var urlHalves = String(document.location).split('?');
if(urlHalves[1]){
var urlVars = urlHalves[1].split('&');
for(var i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
var urlVarPair = urlVars[i].split('=');
document.$_GET[urlVarPair[0]] = urlVarPair[1];
}
}
}
var tag_tag=document.$_GET['tags'];
alert(tag_tag);
document.getElementById("resultElem4").innerHTML=tag_tag;
</script>
</head>
<body>
<p id='resultElem4'></p>
</body>
</html>
its showing the string in alert but not in html when i call it like result.php?tags=cat
Put your script tag at the bottom (right before the closing body tag). The issue is that the element resultElem4 hasn't loaded when you try to reference it using getElementById.
You just move the < script > to the end of the body.
<body><p></p><script>....</script></body>