im still newbie so i learn firebase instead...
i make simple code for html like this
<div class="container" id="msgs">
</div>
so i want to load the data from firebase when document start
firebase.database().ref('message').on('value',function(snapshot){
msgs.innerHTML='';
snapshot.forEach(function(e){
var data=e.val();
msgs.innerHTML+='<p>'+$(data.user)+':'+$(data.txt)+'</p>';
});
});
but its returns:
my data is like this:
i just want to learn simple way how to retrieve the data and fetch it to html and learn how to access firebase array... thanksss
In this line:
msgs.innerHTML+='<p>'+$(data.user)+':'+$(data.txt)+'</p>';
The $(data.user) and $(data.txt) are trying t look up the value of HTML nodes. That's not what you want, as you simply want to use the value of the data.user and data.txt properties.
So:
msgs.innerHTML+='<p>'+data.user+':'+data.txt+'</p>';
Related
I'm new to programming, I'm trying to build a web app using nodejs/expressjs.
so basically on the post route, after some processing on backend it gives an array of object in result variable, I want to use this result variable data and construct a table in html file and send this table.html file as a response to client
the problem I'm encountering is how can I use this result variable to add element of table in html file dynamically (since array size changes everytime )
approach i was using
i created table.html and table.js that is linked with same html file.. but when table.html is send as a response that html file and table.js file is rendered on client side and not able to pass the result value that i get from server to that table.js file ( i get a document not defined error)
i tried to use EJS template .. how to create a function that used ejs variable to loop through array data and show table.. i'm unable to do
if anyone can help me to show result=[{name:'james', id:23},{name:'joe',id:35}]
to html file as response
main.js
app.post('/dataTbale',(req,res) => {
// after some processing i get array of obj that i store in result variable
const result=[{name:'james', id:23},{name:'joe',id:35}];
res.send('table.html);
})
table.html
<html>
<body>
<h2>table</h2>
<div id="show_table"></div>
<script src="table.js"></script>
</body>
</html>
table.js
const tableDiv=document.queryselector('#show_tabel');
result.forEach((obj) => { //<==== i want to pass that result data here.
tableDiv.innerHTML += result;
});
P.S just want to know if this works then i can create table
You might use a template engine like (ejs) or any other template engines to show the dynamic data that returns back from the server and for the case that you want to render the results in different page you should store the data in any kind of storages like local storage or database to be able to use it in different places.
I've got a variable, say data containing data in the form of an Array with each item having a unique ID.
app.get('/products/:id', function (req, res) {
res.send(data.map(data => "" + data.id + "")) //basically gets the data of the element in the Array whos Id has been given to the server.
})
I have sent the data from the server to the front-end on a GET request. But how do I create a seperate webpage for each element dynamically in the data array? where do i have to write the html and the css? I want a way with which I can create a page for each element like domain.com/products/id which displays information about the data entry which matches the Id . Do need to use pug? hbs?ejs? I' so confused.
So I found I had to use Javascript Templates to send data to a view. I used ejs, which went pretty good!
Here's how it went:
1. fetch my data form my DB, which in this case is MongoDB using db.findOne().
2. We get an array, let's say data. send the variable to my view using the same res.render syntax, just in a cooler way.
app.get('/blogs/:id',(req,res)=>{
const data = //find function
res.render('page.ejs', {body:data});
})
:id creates a page for every element in the DB.
and now the view that is, the public/page.ejs file has a global body variable, which
we can now use to show our blogs.
3. the front end markup in pages.ejs:
<div class="blogs">
<%=body.forEach (item)=>{%>
<p><%=item.blog%></p><br>
<%=}%>
</div>
We call a forEach function on the array, and create a paragraph element for each item in the array, that is for each blog.
Please not that <%, <%= and %> are EJS' tags. Read about them more in the official docs.
Thanks Mohammad for letting me know about this. (From comments)
I feel like this is a really simple question but I can't find the help I need, so I'm turning to you.
If you go to this request URL: https://public.ecologi.com/users/lightlysalted/impact
, you will see a very basic JSON response with two keys and their respective values:
{"trees":383,"carbonOffset":12.52}
I would like to put the trees number in one paragraph and the carbon offset in another paragraph on a HTML page, like the below:
<p class="trees">383</p>
<p class="carbonoffset">12.52</p>
Thank you for your help in advance!
First you need to fetch the result. You can use the native Fetch API for that.
Then when the json data is received you need to find your html elements, here we loop on the keys and then query the element whose class matches the received json key with document.getElementsByClassName(key). Once we found the element we input the corresponding value with elem[0].textContent = json[key].
fetch("https://public.ecologi.com/users/lightlysalted/impact")
.then((res) => res.json())
.then((json) => {
Object.keys(json).forEach((key) => {
const elem = document.getElementsByClassName(key);
elem[0].textContent = json[key];
});
})
fiddle: https://jsbin.com/tetuyemoqo/1/edit?html,js,output
html doesn't support anything like this out of the box. You'll need to:
fetch the data from the API
parse the data
update the html
In general I recommend a framework like vuejs to do this, but you can also do it with javascript and editing the innerHtml of the p element.
You can parse the response body into a JSON Object using var json = JSON.parse(response.body). After that you can access the attributes of the JSON using json.trees and json.carbonOffset respectively.
You'll then manipulate the content of the HTML useing document.querySelector('.trees').innerHTML(json.trees) and document.querySelector('.carbonoffset').innerHTML(json.carbonOffset).
I have been trying to retrieve data from mongodb (i'm using also mongoose) and send it to angular to fill the ng-repeat list with data. I am able to print data on blank page from mongo OR display data in list if i declare exemplary static array with data in a list on webpage but i dont know how to connect it to work with data from mongo. I am new to MEAN stack so please spare me.
Please go through video tutorial of Bucky Robert. Try to create the project from Hello world then you will understand.
Node JS tutorial click here
MEAN STACK tutorial: click here
First Create RestFul API using Node js
http://adrianmejia.com/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/
Then consume the same using following example.
MessageServiceData.getMessageService=function(){
var def = $q.defer();
$http.post("www.url.com", data)
.success(function(messages){
def.resolve(messages);
})
.error(function(messagesFail){
console.log('error:'+JSON.stringify(messagesFail));
def.reject([{"Error":JSON.stringify(messagesFail)}]);
});
return def.promise;
}
I've been trying to write a program in JavaScript that can retrieve weather data from OpenWeatherMap using JSON. I'm pretty new to JSON, but I think that I understand the logic behind it. However, when I click the "Get JSON" button, nothing happens. It's possible that "data.temp" in the getJSON function is incorrect, but if I'm understanding correctly, it seems like it should at least print the word "Temperature:" HTML and JavaScript are enclosed below, any help is appreciated.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<div id = "owmData" style = "background-color:#cc0;">
Weather data should go here.
</div>
Get JSON
JavaScript:
$(document).ready(function() {
/* Operate when "getIt" button is clicked.*/
$("#getIt").click(function(event){
/* Variable storing weather information.*/
var weatherNow="http://api.openweathermap.org/data/2.5/weather?q=London,uk&callback=test&appid=******************";
$.getJSON(weatherNow,function(data){
$('#owmdata').append('<p>Temperature : ' + data.temp+ '</p>');
});
});
});
In your request parameters you are specifying "test" as the callback function. You can strucuture your request url like this without the ref to the callback and access the data directly:
http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=*************
"temp" is nested inside of the property "main" so you would reference it as data.main.temp