My current issue involves loading words from JSON into my webpage. The images are functioning properly, thankfully.
I have already successfully loaded the necessary images through JSON onto my webpage. However, I am still in need of loading words through JSON onto my webpage.
{"main_object": {
"imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoon", "thee"],
"wordsJ": ["næb", "kat", "æg", "mel", "mælk", "pas", "ske", "te"]
}
}
var jsonData = "noJson";
var hr = new XMLHttpRequest();
$(document).ready(function(){
var jsonData = 'empty';
$.ajax({
async: false,
url: "./js/data.json",
dataType: 'html',
success: function(response){
jsonData = JSON.parse(response);
console.log('ok');
imagesJ = jsonData.main_object.imagesJ;
wordsJ = jsonData.main_object.wordsJ;
for(i = 0; i < imagesJ.length; i++) {
images.innerHTML += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">';
}
document.getElementById('images') = html;
for (i = 0; i < wordsJ.length; i++) {
wordsJ.innerHTML += '<span>' + wordsJ[i] + '</span>';
}
document.getElementById('words') = html;
},
error: function(){
console.log('JSON could not be loaded.');
}
});
console.log(jsonData);
});header {
height: 5%;
}
body {
background-color: #f0f0f0;
}
.container {
height: 90%;
}
.images img {
height: 100px;
width: 100px;
}
footer{
height: 5%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sleepopdracht</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header>
</header>
<div class="container" id="container"><div class="images" id="images"></div>
<div class="words" id="words"></div>
</div>
<footer>
</footer>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>The Javascript code displays how I attempted to load the words similar to the images. While it should work seamlessly, the console keeps reporting an
Uncaught ReferenceError: Invalid left-hand side in assignment ~ jquery.min.js:4
I have been unable to pinpoint the source of the problem or find a solution. Even with the Words loop section commented out, the error persists. Previously, the code ran without issues before implementing the Words Loop.