I'm trying to create an online bookshop website and, since I don't have to fetch data from a database, I've thought about loading my book-objects from a JSON file.
What I should do is: loading the objects from the JSON file and building dynamically the pages (e.g. a page with a list of all the available books, another one with a search bar with filters and so on).
I've recently started to study HTML, CSS, JS (and Node.JS), so I'm not really sure about what I can actually do and what I can't.
I've read online that I could use JQuery in my HTML file to load the JSON from the URL, but still I was wondering: is there any chance that I can load the JSON content in my JS file (maybe through path and fs as in Node.JS) and use it like dynamic content (e.g. through .innerHTML)?
You don't need server side code for this.
Let's assume you have a JSON file called books.json in the same directory as your javascript file:
{
"books": [
{"title": "book1", "author": "author1"},
{"title": "book2", "author": "author2"}
]
}
And a index.html:
<div id="books"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="script.js"></script>
In your script.js, you can load the JSON like this with jQuery:
// global variable
var data;
$.get('books.json', function(d) {
data = JSON.parse(d);
// loop through all books
data.books.forEach(function(b) {
// now you can put every book in your <div>
$("#books").append(`<div><h2>${b.title}</h2><p>${b.author}</p></div>`);
});
});
The search function could go like this:
html:
<input id="input" /><button onclick="search()">search</button>
javascript:
function search() {
$("#books").html("");
let search = $("#input").val();
// filter the data
let filtered = $(data).filter(function (i,b){return b.title == search || b.author == search});
filtered.books.forEach(function(b) {
$("#books").append(`<div><h2>${b.title}</h2><p>${b.author}</p></div>`);
});
}
Related
Question
How can i change my HTML data in the files via node JS i am not using EJS or any view engine I have a views folders where all the files are .js files returning HTML how can i change the data from the node server which selects the MYSQL data for example if i have
I have tried using res.send but it changes the whole file how can i change for example on the about page /aboutus
<h1 id='name'></h1>
How can i add data from the server to edit that file?
thanks
For those who can't quite understand what i am saying is i have a server side which is meant to retrieve an html name for example david and i have a views folder containing js files like home.js which returns html value to the index.html file i want to change the heading tag in html like the code above i want 'David' to be put in the h1 tag
I have not been able to understand perfectly what you want to do ...
But I believe that in any case to create a dynamic client server infrastructure you could use two methods:
by creating an endpoint that returns the data in json or xml format from the database, and replacing your DOM elements with the real data
example:
Express Backend example
app.get('/api/user', async function(req, res) {
const userdata = await getUserData()
res.send(JSON.stringify(userdata));
});
Front end example:
fetch('http://MYAPI.com/api/user')
.then(response => response.json())
.then(data =>{
document.getElementById("username").innerHTML = data.username;
document.getElementById("email").innerHTML = data.email;
});
by converting your html files into handlebars (for example) and replacing the handlebars tags with real data, then return html ready to be rendered.
I have this JSON file I generate in the server I want to make accessible on the client as the page is viewable. Basically what I want to achieve is:
I have the following tag declared in my html document:
<script id="test" type="application/json" src="http://myresources/stuf.json">
The file referred in its source has JSON data. As I've seen, data has been downloaded, just like it happens with the scripts.
Now, how do I access it in Javascript? I've tried accessing the script tag, with and without jQuery, using a multitude of methods to try to get my JSON data, but somehow this doesn't work. Getting its innerHTML would have worked had the json data been written inline in the script. Which it wasn't and isn't what I'm trying to achieve.
Remote JSON Request after page loads is also not an option, in case you want to suggest that.
You can't load JSON like that, sorry.
I know you're thinking "why I can't I just use src here? I've seen stuff like this...":
<script id="myJson" type="application/json">
{
name: 'Foo'
}
</script>
<script type="text/javascript">
$(function() {
var x = JSON.parse($('#myJson').html());
alert(x.name); //Foo
});
</script>
... well to put it simply, that was just the script tag being "abused" as a data holder. You can do that with all sorts of data. For example, a lot of templating engines leverage script tags to hold templates.
You have a short list of options to load your JSON from a remote file:
Use $.get('your.json') or some other such AJAX method.
Write a file that sets a global variable to your json. (seems hokey).
Pull it into an invisible iframe, then scrape the contents of that after it's loaded (I call this "1997 mode")
Consult a voodoo priest.
Final point:
Remote JSON Request after page loads is also not an option, in case you want to suggest that.
... that doesn't make sense. The difference between an AJAX request and a request sent by the browser while processing your <script src=""> is essentially nothing. They'll both be doing a GET on the resource. HTTP doesn't care if it's done because of a script tag or an AJAX call, and neither will your server.
Another solution would be to make use of a server-side scripting language and to simply include json-data inline. Here's an example that uses PHP:
<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>
The above example uses an extra script tag with type application/json. An even simpler solution is to include the JSON directly into the JavaScript:
<script>var jsonData = <?php include('stuff.json');?>;</script>
The advantage of the solution with the extra tag is that JavaScript code and JSON data are kept separated from each other.
It would appear this is not possible, or at least not supported.
From the HTML5 specification:
When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, the src attribute must not be specified, and the contents of the script element must conform to the requirements defined for the format used.
While it's not currently possible with the script tag, it is possible with an iframe if it's from the same domain.
<iframe
id="mySpecialId"
src="/my/link/to/some.json"
onload="(()=>{if(!window.jsonData){window.jsonData={}}try{window.jsonData[this.id]=JSON.parse(this.contentWindow.document.body.textContent.trim())}catch(e){console.warn(e)}this.remove();})();"
onerror="((err)=>console.warn(err))();"
style="display: none;"
></iframe>
To use the above, simply replace the id and src attribute with what you need. The id (which we'll assume in this situation is equal to mySpecialId) will be used to store the data in window.jsonData["mySpecialId"].
In other words, for every iframe that has an id and uses the onload script will have that data synchronously loaded into the window.jsonData object under the id specified.
I did this for fun and to show that it's "possible' but I do not recommend that it be used.
Here is an alternative that uses a callback instead.
<script>
function someCallback(data){
/** do something with data */
console.log(data);
}
function jsonOnLoad(callback){
const raw = this.contentWindow.document.body.textContent.trim();
try {
const data = JSON.parse(raw);
/** do something with data */
callback(data);
}catch(e){
console.warn(e.message);
}
this.remove();
}
</script>
<!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe -->
<iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>
Tested in chrome and should work in firefox. Unsure about IE or Safari.
I agree with Ben. You cannot load/import the simple JSON file.
But if you absolutely want to do that and have flexibility to update json file, you can
my-json.js
var myJSON = {
id: "12ws",
name: "smith"
}
index.html
<head>
<script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
<div id="json-holder"></div>
</body>
place something like this in your script file json-content.js
var mainjson = { your json data}
then call it from script tag
<script src="json-content.js"></script>
then you can use it in next script
<script>
console.log(mainjson)
</script>
Check this answer: https://stackoverflow.com/a/7346598/1764509
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
If you need to load JSON from another domain:
http://en.wikipedia.org/wiki/JSONP
However be aware of potential XSSI attacks:
https://www.scip.ch/en/?labs.20160414
If it's the same domain so just use Ajax.
Another alternative to use the exact json within javascript. As it is Javascript Object Notation you can just create your object directly with the json notation. If you store this in a .js file you can use the object in your application. This was a useful option for me when I had some static json data that I wanted to cache in a file separately from the rest of my app.
//Just hard code json directly within JS
//here I create an object CLC that represents the json!
$scope.CLC = {
"ContentLayouts": [
{
"ContentLayoutID": 1,
"ContentLayoutTitle": "Right",
"ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/right.png",
"ContentLayoutIndex": 0,
"IsDefault": true
},
{
"ContentLayoutID": 2,
"ContentLayoutTitle": "Bottom",
"ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/bottom.png",
"ContentLayoutIndex": 1,
"IsDefault": false
},
{
"ContentLayoutID": 3,
"ContentLayoutTitle": "Top",
"ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/top.png",
"ContentLayoutIndex": 2,
"IsDefault": false
}
]
};
While not being supported, there is an common alternative to get json into javascript. You state that "remote json request" it is not an option but you may want to consider it since it may be the best solution there is.
If the src attribute was supported, it would be doing a remote json request, so I don't see why you would want to avoid that while actively seeking to do it in an almost same fashion.
Solution :
<script>
async function loadJson(){
const res = await fetch('content.json');
const json = await res.json();
}
loadJson();
</script>
Advantages
allows caching, make sure your hosting/server sets that up properly
on chrome, after profiling using the performance tab, I noticed that it has the smallest CPU footprint compared to : inline JS, inline JSON, external JS.
I'm currently working on a project where I'm creating a playable ad I'd like to upload to Facebook.
According to Facebook's ad specifications: (https://www.facebook.com/business/help/412951382532338?helpref=faq_content)
They only accept a single HTML file of size less than 2mb for uploading. This means I need to inline all external references to a single HTML file. Which brings me to my problem:
In order to speed up development I use game engines like PlayCanvas and Phaser Editor. The issue I'm facing with most game engines is that they always have data stored in a JSON file that makes it difficult to reference into an HTML file. Is there any way I can inline this data into my file as well?
JSON data containing a base64 encoded image:
"section": [{
"type": "image",
"key": "logo",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEn.........",
"overwrite": false
}],
"meta": {
"generated": "1543491968969",
"app": "Phaser Editor",
"url": "http://phasereditor.boniatillo.com",
"version": "1.0",
"copyright": "Arian Fornaris (c) 2015,2016"
}
}
Function that references this data in my HTML file:
Level.prototype.preload = function ()
{
this.load.pack('section', 'assets/pack.json');
};
Is there a way I can load the referenced data from the JSON file into this function? I've tried using
<script id="data" type="application/json">
{
JSON data here
}
</script>
and then inlining code inside the braces. Replacing 'assets/pack.json' with this code. I've also tried replacing 'section' with it's respective JSON data but I've not been successful. I hope there's someone out there who can understand how this function works and how it would be possible to inline this data there.
I'm also curious if there are any game engines or softwares that would output a single HTML file that I could use in my development.
I'd like to thank everyone in advance and I appreciate any help in solving this.
I think you can achieve this by creating a HTML field which is hidden and setting it's data- to be an object like this.
<div data-foobar='{"foo":"bar"}'></div>
Check out this link :
http://jsfiddle.net/GlauberRocha/Q6kKU/
I started to write a scraper for the site to collect data on cars. As it turned out, the data structure can change, since the sellers do not fill all the fields, because of what there are fields that can change, and during the scraper as a result in the csv file, the values are in different fields.
page example:
https://www.olx.ua/obyavlenie/prodam-voikswagen-touran-2011-goda-IDBzxYq.html#87fcf09cbd
https://www.olx.ua/obyavlenie/fiat-500-1-4-IDBjdOc.html#87fcf09cbd
data example:
Data example
One approach was to check the field name with text () = "Category name", but I'm not sure how to correctly write the result to the correct cells.
Also I use the built-in Google developer tool, and with the help of the command document.getElementsByClassName('margintop5')[0].innerText
I brought out the whole contents of the table, but the results are not structured.
So, if the output can be in json format then it would solve my problem?
innerText result
In addition, when I studied the page code, I came across a javascript script in which all the necessary data is already structured, but I do not know how to get them.
<script type="text/javascript">
var GPT = GPT || {};
GPT.targeting = {"cat_l0":"transport","cat_l1":"legkovye-avtomobili","cat_l2":"volkswagen","cat_l0_id":"1532","cat_l1_id":"108","cat_l2_id":"1109","ad_title":"volkswagen-jetta","ad_img":"https:\/\/img01-olxua.akamaized.net\/img-olxua\/676103437_1_644x461_volkswagen-jetta-kiev.jpg","offer_seek":"offer","private_business":"private","region":"ko","subregion":"kiev","city":"kiev","model":["jetta"],"modification":[],"motor_year":[2006],"car_body":["sedan"],"color":["6"],"fuel_type":["543"],"motor_engine_size":["1751-2000"],"transmission_type":["546"],"motor_mileage":["175001-200000"],"condition":["first-owner"],"car_option":["air_con","climate-control","cruise-control","electric_windows","heated-seats","leather-interior","light-sensor","luke","on-board-computer","park_assist","power-steering","rain-sensor"],"multimedia":["acoustics","aux","cd"],"safety":["abs","airbag","central-locking","esp","immobilizer","servorul"],"other":["glass-tinting"],"cleared_customs":["no"],"price":["3001-5000"],"ad_price":"4500","currency":"USD","safedealads":"","premium_ad":"0","imported":"0","importer_code":"","ad_type_view":"normal","dfp_user_id":"e3db0bed-c3c9-98e5-2476-1492de8f5969-ver2","segment":[],"dfp_segment_test":"76","dfp_segment_test_v2":"46","dfp_segment_test_v3":"46","dfp_segment_test_v4":"32","adx":["bda2p24","bda1p24","bdl2p24","bdl1p24"],"comp":["o12"],"lister_lifecycle":"0","last_pv_imps":"2","user-ad-fq":"2","ses_pv_seq":"1","user-ad-dens":"2","listingview_test":"1","env":"production","url_action":"ad","lang":"ru","con_inf":"transportxxlegkovye-avtomobilixx46"};
data in json dict
How can I get the data from the pages using python and scrapy?
You can do it by extracting the JS code from the <script> block, using a regex to get only the JS object with the data and then loading it using the json module:
query = 'script:contains("GPT.targeting = ")::text'
js_code = response.css(query).re_first('targeting = ({.*});')
data = json.loads(js_code)
This way, data is a python dict containing the data from the JS object.
More about the re_first method here: https://doc.scrapy.org/en/latest/topics/selectors.html#using-selectors-with-regular-expressions
I am new to both three.js and javascript so this might be a very noob question.
I have a list of json objects in a file which contains data as following:
[
{ "x":x,"y":y,"z":z ,"r":r},
{ "x":x2,"y":y2,"z":z2 ,"r":r2},
{ "x":x3,"y":y3,"z":z 3,"r":r3}
]
And render it on screen.
Its exactly an example here: http://mrdoob.github.com/three.js/examples/webgl_materials2.html
except that sphere values I am reading from a file?
How do i tweak the example above that i read the values from this file instead of directly hardcoding these values in js?
Please help
THanks
If all you want to do is separate the data from your application logic, then you don't need to create a JSON file and load it via Ajax, you can just create another JavaScript file and put the data in there.
For example:
// myData.js
var myData = [
{ "x":x,"y":y,"z":z ,"r":r},
{ "x":x2,"y":y2,"z":z2 ,"r":r2},
// ...
];
// --------------
// myApplication.js
// Here goes the three.js code and you can access the data here, for example
alert(myData[0].x);
In your HTML file, you have to include the data file first, so that all following scripts have access to the myData variabe:
<script src="myData.js"></script>
<script src="myApplication.js"></script>
<!-- this works to: -->
<script>
alert(myData.length);
</script>
If you want to or have to load the file via Ajax, have a look at this question: How do I load a JSON object from a file with ajax?.