How to get json text into html DOM - javascript

I am able to get the data from an external URL JSON but cant put it into the DOM not too sure what I'm doing wrong but here's my code. I suspect that it has something to do with the obj.fruit.json but not too certain
<!DOCTYPE html>
<html>
<head>
<title>Starting Point</title>
<script>
function do_exercise()
{
var x = new XMLHttpRequest();
x.open('GET', 'http://tmaserv.scem.uws.edu.au/fruit.json', true);
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status ==200) {
alert(x.responseText);
obj = JSON.parse(text);
document.getElementById("section1").innerHTML =
obj.fruit.json[2].name + " " +
obj.fruit.json[2].description;
}
}
x.send(null);
}
</script>
</head>
<body>
<nav>
<button onclick="do_exercise();">Click Me</button>
</nav>
<section id = "section1">
<h1>Heading One</h1>
<p>Paragraph One.</p>
</section>
</body>
</html>
cheers

<!DOCTYPE html>
<html>
<head>
<title>Starting Point</title>
<script>
function do_exercise () {
var x = new XMLHttpRequest();
x.open('GET', 'http://tmaserv.scem.uws.edu.au/fruit.json', true);
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status ==200) {
obj = JSON.parse(x.responseText);
document.getElementById("section1").innerHTML =
obj[2].name + " " +
obj[2].description;
}
}
x.send(null);
}
</script>
</head>
<body>
<nav>
<button onclick="do_exercise();">Click Me</button>
</nav>
<section id = "section1">
<h1>Heading One</h1>
<p>Paragraph One.</p>
</section>
</body>
</html>

Related

Cannot read property 'innerHTML' of null error. My script is at the end of the body, why am I still getting this error?

My script is at the end of the body, which has been the basic answer I've seen given when searching for a solution. What am I doing wrong? Do I need to use async/await? I've written almost this exact code before, and its worked.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body id="body">
<h1 id="header">Pokemon</h1>
<div id="main-container">
</div>
<button id="button">Click</button>
<script type="text/javascript" src="ajax.js"></script>
</body>
</html>
JS:
let pokemon = document.querySelectorAll('.poke');
let button = document.getElementById('button');
let container = document.getElementById('main-container');
function loadPokemon() {
const urs = 'https://pokeapi.co/api/v2/pokemon';
let xhr = new XMLHttpRequest();
xhr.onload = function() {
if(xhr.status === 200) {
const poke = JSON.parse(xhr.responseText)
container.innerHTML+= `
${poke.results.map(function(pok, index) {
return `
<div class='poke'>
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${(index + 1).toString()}.png">
</img>
${pok.name}
</div>
`
})}
`
}
}
xhr.open('GET', urs, true);
xhr.send();
};
button.addEventListener('click', loadPokemon);
It is working here.. I did not make any changes to your code
let pokemon = document.querySelectorAll('.poke');
let button = document.getElementById('button');
let container = document.getElementById('main-container');
function loadPokemon() {
const urs = 'https://pokeapi.co/api/v2/pokemon';
let xhr = new XMLHttpRequest();
xhr.onload = function() {
if(xhr.status === 200) {
const poke = JSON.parse(xhr.responseText)
container.innerHTML+= `
${poke.results.map(function(pok, index) {
return `
<div class='poke'>
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${(index + 1).toString()}.png">
</img>
${pok.name}
</div>
`
})}
`
}
}
xhr.open('GET', urs, true);
xhr.send();
};
button.addEventListener('click', loadPokemon);
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body id="body">
<h1 id="header">Pokemon</h1>
<div id="main-container">
</div>
<button id="button">Click</button>
<script type="text/javascript" src="ajax.js"></script>
</body>
</html>
Your code is working fine. Are you sure you copy and pasted the exact code?

Show Hide using style not working

Can someone please explain to me why this plain-jane web page does NOT do what it is supposed to do, that is to say, change the style from display:none; to display:block; ??
thanks!
function ShowHideModal(elemID) {
var Selem = document.getElementById(elemID);
if (Selem != null)
{
if (Selem.style.display == "none")
Selem.style.display = "block;"
else
Selem.style.display = "none;"
}
}
TryIt
<div id="test1" style="display:none;">
This is my content baby!
</div>
You are placing the ";" inside the quotations for "block;" and "none;".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
TryIt
<div id="test1" style="display:none;">
This is my content baby!
</div>
<script type="text/javascript">
function ShowHideModal(elemID) {
var Selem = document.getElementById(elemID);
if (Selem != null) {
if (Selem.style.display === "none") {
Selem.style.display = "block";
} else {
Selem.style.display = "none";
}
}
}
</script>
</body>
</html>

innerHTML works in console, but not in js file

I have this code:
window.addEventListener("load", function() {
console.log("s");
var pres = document.querySelectorAll("pre[lang]");
console.log(pres);
for (var i = 0; i < pres.length; i++) {
console.log("x")
var lang = pres[i].getAttribute("lang");
console.log(lang);
console.log(pres[i].innerHTML);
pres[i].innerHTML = highlight_c(pres[i].innerHTML);
console.log(pres[i].innerHTML);
}
});
All the console.logs work, except for the console.log(pres[i].innerHTML);. pres[i].innerHTML = highlight_c(pres[i].innerHTML); is also not working. It does work in console, though. When I run this code in the JavaScript-console everything works! But when it is runned from the js-file, it doesn't work.
BTW: Those messy console.logs are just to check that my code was running.
EDIT: The highlight_c function is defined in another file and it works completely fine.
Here is my HTML:
<html>
<head>
<title>Index - C: Local documentation</title>
<link rel="stylesheet" type="text/css" href="styles/global.css">
<link rel="stylesheet" type="text/css" href="syntax-highlighting/styles/c.css">
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="header">
<h1>C: Local documentation</h1>
</div>
<div id="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li>Reading files</li>
<li>Page 02</li>
<li>Page 03</li>
</ul>
</div>
<div id="main">
<h2>Reading files</h2>
<p>How to read files:</p>
<pre lang="c" src="reading-files.c"></pre>
<p>That's it.</p>
</div>
</div>
<div id="footer">
Copyright © 2018 Quintus Rijpstra.
</div>
</div>
<script type="text/javascript" src="scripts/pre-load.js"></script>
<script type="text/javascript" src="syntax-highlighting/load.js"></script>
<script type="text/javascript" src="syntax-highlighting/scripts/c.js"></script>
</body>
The pre tag has no contents but an src tag, wich is used by another function to load text into it:
window.addEventListener("load", function() {
var pres = document.querySelectorAll("pre[src]");
for (var i = 0; i < pres.length; i++) {
var src = pres[i].getAttribute("src");
loadfile(src, load);
}
});
function load(filecontent, filename) {
var pre = document.querySelectorAll("pre[src=\"" + filename + "\"]");
for (var i = 0; i < pre.length; i++) {
pre[i].innerHTML = filecontent;
}
}
function loadfile(filename, handler) {
var xmlrequest = new XMLHttpRequest();
xmlrequest.open("GET", filename);
xmlrequest.onreadystatechange = function() {
if (xmlrequest.readyState == 4) {
if (xmlrequest.status == 200) {
var content = xmlrequest.responseText;
handler.call(null, content, filename);
}
}
};
xmlrequest.send(null);
}
Can anyone help me?
Thanks in advance!
Instead of
var pres = document.querySelectorAll("pre[lang]");
Try to get your 'pre' tag in JS by tag name:
var pres = document.getElementsByTagName('pre')[lang].innerHTML;

AJAX Powered Data Driven App

When I type in an artist and I click the button, I should get a nice list of their songs in a format that is aesthetically pleasing.
My error is:
Nothing is returns whenever I press the button, I don't know why that is.
HTML File
<!DOCTYPE html>
<html>
<head>
<title>Songs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="ajaxfunctions.js"></script>
</head>
<body>
<div class="container">
<h2>Songs </h2>
<br/>
<p>Try entering an artist to find their songs</p>
<div>
<div id="musicbox" class="control-group">
<label for="songs">artistr</label>
<input type="text" name="songs" id="songs" placeholder="Type an artist to their songs" />
</div>
</div>
<br />
<div>
<button class='btn btn-success btn-large' onclick="Music('songs')">Find Songs</button>
</div>
<br />
<div>
</div>
</div>
</body>
</html>
JS File
function Music(music) {
var yourmusic = document.getElementById(music).value;
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function () {
if (this.readyState === 4) {
if(this.status === 200) {
displayMusic(this.responseText);
} else if (this.status === 404){
displayMusic('{ "songs" : "none" }');
} else {
console.log("We have a problem: " + this.status);
}
} else {
}
};
var url = " https://api.mixcloud.com/discover/funk/";
httpRequest.open("GET", url, true);
httpRequest.send();
}
function displayMusic(data){
var music = JSON.parse(data);
if(music.songs === "none") {
document.getElementById("songs").className = "alert alert-warning";
document.getElementById("songs").innerHTML = "The songs are" + music;
} else {
document.getElementById("songs").className = "alert alert-success";
document.getElementById("songs").innerHTML ="there are no songs for this artist"
}
}

GET request into table

I have this next html document, which has to load a table, which is filled with the values I get back from a XMLHttpRequest.
when I try to run the page, it won't give anything like a table back, so if anyone sees what's the problem in this code, please help!!
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evenementen | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
initialiseListEvenementen();
};
initialiseListEvenementen() {
var BASE_URL = "http://localhost:8080/OnzeBuurt2/resources/";
var events = [];
//load the groups from the back-end
var request = new XMLHttpRequest();
request.open("GET", BASE_URL + "events");
request.onload = function() {
if(request.status === 200) {
events = JSON.parse(request.responseText);
for(var i = 0; i < events.length; i++) {
$("#eventList").append(createListElementForEvent(i));
}
if(events.length > 0) {
$("#eventList").listview('refresh');
} else {
console.log("Error");
}
} else {
console.log("Error loading groups: " + request.status + " - "+ request.statusText);
}
};
request.send(null);
}
function createListElementForEvent(eventIndex) {
var datum = $("<p>").text("Datum: " + events[eventIndex].datum);
var titel = $("<p>").text("Titel: " + events[eventIndex].titel);
var details = $("<p>").text("Details: " + events[eventIndex].details);
var auteur = $("<p>").text("auteur: " + events[eventIndex].auteur.naam);
var latitude = $("<p>").text("Datum: " + events[eventIndex].locatie.latitude);
var longitude = $("<p>").text("Datum: " + events[eventIndex].locatie.longitude);
return $("<li>").append(datum).append(titel).append(details).append(auteur).append(latitude).append(longitude);
}
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Evenementen
</center>
</div>
<ul id="eventList" class="lijst"></ul>
<div id="home2">
<form name="input" action="" method="get">
<img src="home.png" alt="Home" />
</form>
</div>
<div id="terug2">
<form name="input" action="" method="get">
<img id="btnterug" src="vorige.png" alt="Vorige" />
</form>
</div>
</div>
</body>
</html>
after couple of hours of work, I found the solution. Hope i can help some of you:
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evenementen | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var url = "http://localhost:8080/OnzeBuurt2/resources/events";
var events = [];
$(document).ready(function() {
var request = new XMLHttpRequest();
request.open("GET", url);
request.onload = function() {
if(request.status === 200) {
events = JSON.parse(request.responseText);
for(var i = 0; i < events.length; i++) {
$("#eventList").append(createListElementForEvent(i));
}
if(events.length > 0) {
$("#eventList").listview('refresh');
} else {
console.log("Error");
}
} else {
alert("fout gegaan");
console.log("Error loading groups: " + request.status + " - "+ request.statusText);
}
};
request.send(null);
});
function createListElementForEvent(eventIndex) {
var datum = $("<td>").text(events[eventIndex].datum);
var titel = $("<td>").text(events[eventIndex].titel + " - " + events[eventIndex].details);
var auteur = $("<td>").text(events[eventIndex].auteur.naam);
return $("<tr>").append(datum).append(titel).append(auteur);
}
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Evenementen
</center>
</div>
</div>
<div class="tabelEvents">
<table id="eventList" class="tabel" border="1">
<tr><th>Datum</th><th>Titel</th><th>Auteur</th></tr>
</table>
</div>
<div id="home2">
<form name="input" action="" method="get">
<img src="home.png" alt="Home" />
</form>
</div>
<div id="terug2">
<form name="input" action="" method="get">
<img id="btnterug" src="vorige.png" alt="Vorige" />
</form>
</div>
</body>
</html>

Categories