I am trying to get images from a Firebase Storage into a table, and the links to each image are given as a Child in a Firebase Database. By following many of the SE recommendations, I finally got a code that can convert images from from gs:// to http://. By using alert(url), I can see the image link that can potentially be inserted in a <img>, but I can't manage to make it show as an image object. What am I doing wrong in the code? Can anyone help me to elucidate this?
In the code below, imageUrl contains the gs:// code
< script >
var events = firebase.database();
var storage = firebase.storage();
events.ref("-Events").orderByKey().limitToLast(10).once('value', function(snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function(data) {
var val = data.val();
var link = val.imageUrl;
var storageRef = storage.refFromURL(link).getDownloadURL().then(function(url) {
var test = url;
alert(url);
document.querySelector('img').src = test;
alert(test);
}).catch(function(error) {});
content += '<tr>';
content += '<td>' + val.imageUrl + '</td>';
content += '<td>' + '<img src="storageRef.url" alt='
' border=3 height=100 width=100>' + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
var tbody = $('table tbody');
tbody.html($('tr', tbody).get().reverse());
}
});
<
/script>
mi js
var imgs = document.getElementById("galeria");
function mostrarImagenDeFirebase() {
imagenesFbRef.on("value", function (snapshot) {
var datos = snapshot.val();
var result = "";
result += '<div class="owl-carousel owl-theme">';
for (var key in datos) {
var images = datos[key].url;
result += '<img class="owl-lazy" height="500" data-src="'+images+'" alt="">';
console.log(images);
}
result += ' </div>';
imgs.innerHTML += result;
});
}
<div class="row"id="galeria">
</div>
does not show the page the images only leaves the space but does not show it
Try replacing data-src= with src=, also please close your image tags - <img ... />
I am new to html coding.
I want to read and display my csv file data to a webpage. Data in each row of csv file must be displayed in a separate line on webpage.
My current code doesn't display anything and I don't have any clue why is it not working properly.
Please help me in this regard.
My code is below:
<!DOCTYPE html>
<html>
<script type="text/javascript">
var allText =[];
var allTextLines = [];
var Lines = [];
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "D:\PycharmProjects\filename.csv", true);
txtFile.onreadystatechange = function()
{
allText = txtFile.responseText;
allTextLines = allText.split(/\r\n|\n/);
};
document.write(allTextLines);<br>
document.write(allText);<br>
document.write(txtFile);<br>
</script>
You can use following javascript for read and display data from csv file
<script type="text/javascript">
$.get('/file-path/demo.csv', function(data) {
var build = '<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="100%">\n';
var head = data.split("\n");
for(var i=0;i<1;i++){
build += "<tr><th>" + head[i] + "</th></tr>";
for(var i=1;i<head.length;i++){
build += "<tr><td>" + head[i].split("\n") + "</td></tr>";
}
}
build += "</table>";
$('#wrap').append(build);
});
</script>
You can iterate over the allTextLines array as soon as your document is loaded
var txtFile = new XMLHttpRequest();
txtFile.onload = function() {
allText = txtFile.responseText;
allTextLines = allText.split(/\r\n|\n/);
for(var i = 0; i < allTextLines.length; i++) {
document.body.innerHTML += allTextLines[i];
document.body.innerHTML += '<br/>';
}
}
txtFile.open("get", "filename.csv", true);
txtFile.send();
where filename.csv should be put in your server static resources
I have this problem where my words of JSON won't load into my Webpage, the images do work already, fortunally..
I already have the images that needed to be loaded trough JSON into my Webpage.
I still need some words to load trough JSON into 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>
In the Javascript you can see that I loaded the words a little like the images, as far as I know it should just work, but the console reports an
Uncaught ReferenceError: Invalid left-hand side in assignment ~ jquery.min.js:4
I can't seem to figure out te source of the problem, neighter do I know how to solve it full.
It seems that The error exists even if i commend the Words loop out, The Error existed already without the code calling the words JSON. But now the problem still is that I can't find the source of the problem, if I found it, it is probably easy to solve. Since the last time I checked, the code ran perfectly without the Words Loop
I see that you havn't defined imagesJ and wordsJ
var imagesJ;
var wordsj;
And you need to do something like this
var word = document.getElementById('words');
var html = '';
for (i = 0; i < wordsJ.length; i++) {
html += '<span>' + wordsJ[i] + '</span>';
}
word.innerHTML = html;
Final File
var jsonData = "noJson";
var hr = new XMLHttpRequest();
var imagesJ;
var wordsj;
$(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;
var word = document.getElementById('words');
var html = '';
for (i = 0; i < wordsJ.length; i++) {
html += '<span>' + wordsJ[i] + '</span>';
}
word.innerHTML = html;
},
error: function(){
console.log('JSON could not be loaded.');
}
});
console.log(jsonData);
});
Try changing this code:
for (i = 0; i < wordsJ.length; i++) {
wordsJ.innerHTML += '<span>' + wordsJ[i] + '</span>';
}
document.getElementById('words') = html;
to:
var words = document.getElementById('words')
for (i = 0; i < wordsJ.length; i++) {
words.innerHTML += '<span>' + wordsJ[i] + '</span>';
}
I found that the problem was in
document.getElementById('images') = html;
this was wrong, first I didn't call html at all so I made a var after console log of html with an empty string.
console.log('ok');
var imagesJ = jsonData.main_object.imagesJ;
var wordsJ = jsonData.main_object.wordsJ;
var html = '';
var html2 = '';
The var html2 is for the words.
then my document.getElementById was not complete (that was the Error)
This was the proper code for the document.
document.getElementById('images').innerHTML = html;
Then I had,
images.innerHTML += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">';
wich needed to be this,
html += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">';
So my full code then was,
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');
var imagesJ = jsonData.main_object.imagesJ;
var wordsJ = jsonData.main_object.wordsJ;
var html = '';
var html2 = '';
for(i = 0; i < imagesJ.length; i++) {
html += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">';
//images.innerHTML += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">';
}
document.getElementById('images').innerHTML = html;
//$('#images').append(html);
for (i = 0; i < wordsJ.length; i++) {
words.innerHTML += '<span>'+wordsJ[i]+'</span>';
}
document.getElementById('words').innerHTML = html2;
},
error: function(){
console.log('JSON could not be loaded.');
}
});
console.log(jsonData);
});
Altough I still don't have the words in my browser, the Error is resolved.
Thanks Everyone :D Happy programming!
I'm very new to both JQuery and Javascript. I have an feed, I would like to display these feed inside a collapsible div AS a collapsible div. I have the following Javascript file:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
google.setOnLoadCallback(showFeed);
function showFeed() {
var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var di = document.createElement("div").setAttributeNode("data-role", "collapsible");
di.innerHTML = '<h3>' + entry.title + '</h3>';
di.innerHTML += '<p>' + entry.contentSnippet + '</p>';
container.appendChild(di);
}
} else {
var container = document.getElementById("headlines");
container.innerHTML = '<li>Get your geek news fix at site</li>';
}
});
}
</script>
<body>
<div data-role="collapsible-set" id="headlines"></div>
</body>
This should fetch all my feed names and put them in a collapsible div, it does exactly that but it shows the names as plain HTML text instead of a JQuery Mobile collapsible div.
#AML, that is more a comment than an answer because a don't analyse your entire code, but I will put here for formatting purposes.
In the line:
var di = document.createElement("div").setAttributeNode("data-role", "collapsible");
You don't take a pointer(di) to the new created element, you take a result of the setAttributeNode(...), You need to split the code in two lines like that:
var di = document.createElement("div");
di.setAttribute("data-role", "collapsible");
There are a problem with setAttributeNode actually is setAttribute.
Now is working, see at http://pannonicaquartet.com/test/feeds.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.collapsible{
display : none;
}
h3{
background-color : lightgray;
}
</style>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function showFeed() {
var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.onclick = function(evt){
var elP = this.children[1];
if(elP.style.display == 'inline'){
elP.style.display = 'none';
}else{
elP.style.display = 'inline';
}
};
div.innerHTML = '<h3>' + entry.title + '</h3>';
div.innerHTML += '<p class="collapsible">' + entry.contentSnippet + '</p>';
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(showFeed);
</script>