ExtractData from GET Paramter and load content from .json file - javascript

I have a html page (product page) which now I have to fill with content from a .json file (array with different products, accessible via id). In the url you should be able to set a GET parameter like this:
/product?product_id=14
I know that no more information will be passed in the url, so I don't need to use any regex.
Now I simply have no idea to get the content into my html file, all I know so far is (js file):
let h1 = document.querySelector('h1');
if (h1) {
h1.textContent = '#1';
} else {
console.log('#1: No content found!');
}
So now I need to know which id was passed via GET parameter and how to load the content from the .json database.
Thanks in advance

Here's an easy way to get the parameter from the URL: https://stackoverflow.com/a/20336097/7303349
And then getting the json database sounds like an entirely different step. Try to do less things at a time. Also, where does the .json database come from?

Related

Resolve a 301 redirect and store the url for future use javascript

So I have a script that organises an un-formatted csv file and presents an output.
One of the pieces of data I receive in this data that we must return is a link to an image stored on Google Drive. The problem with this is Google Drive doesn't like to present you with a direct link to a file.
You can get the ID of a file (e.g. abc123DEFz) and view it online at https://drive.google.com/open?id=abc123DEFz. We need a direct link for another service to be able to process the file, not a redirect or some fancy website.
After poking around I discovered that https://drive.google.com/uc?export=view&id=abc123DEFz would redirect you directly to the file, and was what I somehow had to obtain inside the script.
The url it gave me though didn't really seem to have any relation to the ID and I couldn't just go ahead and swap the ID, for each file I would have to resolve this uc?export link into this link that would send me directly to the file. (Where the redirect sent me: http://doc-0c-2s-docs.googleusercontent.com/docs/securesc/32-char-long-alphanumeric-thing/another-32-char-long-alphanumeric-thing/1234567891234/12345678901234567890/12345678901234567890/abc123DEFz?e=view&authuser=0&nonce=abcdefgh12345&user=12345678901234567890&hash=32-char-long-alphanumeric-hash)
No authentication is required to access the file, it is public.
My script works like this:
const csv = require('csv-parser'),
fs = require('fs'),
request = require('request');
let final = [],
spuSet = [];
fs.createReadStream('data.csv')
.pipe(csv())
.on('data', (row) => {
>> data processing stuff, very boring so you don't care
console.log(`
I'm now going to save this information and tell you about the row I'm processing
so you can see why something went wrong`);
final.push(`[{"yes":"there is something here"},{"anditinvolves":${thatDataIJustGot}]`);
spuSet.push(`[{"morethings":123}]`);
})
.on('end', () => {
console.log('CSV file successfully processed');
console.log(`
COMPLETED! Check the output below and verify:
[${String(final).replace(/\r?\n|\r/g, " ")}]
COMPLETED! Check the output below and verify:
[${String(spuSet).replace(/\r?\n|\r/g, " ")}]`);
>> some more boring stuff where I upload the data somewhere and create a file containing said data
});
I tried using requests but it's a function with a callback so using the data outside of the function would be difficult, and wrapping everything inside the function would remove my ability to push to the array.
The url I get from the redirect would be included in the data I am pushing to the array for me to use later on.
I'm pretty bad at explaining crap, if you have any questions please ask.
Thanks in advance for any help you can give.
Try using the webContentLink parameter of the Get API call:
var webLink = drive.files.get({
fileId: 'fileid',
fields: 'webContentLink'
});
This will return the object:
{
"webContentLink": "https://drive.google.com/a/google.com/uc?id=fileId&export=download"
}
Then you can use split() to remove &export=download from the link, as we don't want to download it.
As fileId, you can get the Ids of your files by using the List API Call, and then you can loop through the list array calling the files.get from the first step.
My apologies if I misunderstood your issue.
In case you need help with the authentication to the Google Services, you can take a look at the Quickstart

Parse XML returned data from foreign domain request

I'm trying to parse XML data returned from a foreign website. I use a domain request to send some variables to a website like this : http://www.url.com/page.php?var1=val1&var2=val2...
I get this back appended inside a <div> :
<!--?xml version="1.0" encoding="UTF-8"?-->
<liste>
<produits>
<produit>
<nomprod>Title</nomprod>
<desc>Desc</desc>
<texte>Text</texte>
<url>http://www.url.com</url>
</produit>
</produits>
</liste>
I would like to parse these datas and show them in my page correctly
Any help would be very appreciated, Thanks!
JKL.ParseXML is a really simple to use library you might want to look at. You can get values from your xml with this super simple code
var xml = yourXMlInAString,
data = xml.parse(),
title, desc, text, url;
title = data["liste"]["produits"]["produit"]["nomprod"];
desc = data["liste"]["produits"]["produit"]["desc"];
text = data["liste"]["produits"]["produit"]["text"];
url = data["liste"]["produits"]["produit"]["url"];
Then you can do what you want with the data, that's of course up to you.
Alternatively, jQuery also makes parsing XML, thought I would understand if you opted for the lighter library! If you were to use it, you'd want to look at the parseXML function, there's good documentation on the function's page, so take a look there if you opt for jQuery.

Create a textfile from the input of an html-form with the browser (client-side)

I have an html site with a form in it and I want the user to be able to create a text/xml file depending on the input. But I wan't to avoid setting up a webserver only for this task.
Is there a good way, to do that, e.g. with Javascript? I think you can't create files with Javascript, but maybe create a data url and pass the text, so the user can save it to file?
Or is there another way to achieve this simple task without a webserver?
Solved it, somehow. I create a data url data:text/xml;charset=utf-8, followed by the XML.
function createXML() {
var XML = 'data:text/xml;charset=utf-8,<MainNode>';
var elements = document.getElementsByTagName('input'),i;
for (i in elements) {
if (elements[i].checked == true) {
XML += elements[i].value;
}
}
XML += '</MainNode>';
window.open(XML);
}
So the url looks like data:text/xml;charset=utf-8,<MainNode><SubNode>...</SubNode>...</MainNode>
Unfortunately this doesn't work for me on Chromium(Chrome) and on Firefox. It just displays the XML instead of showing a save dialog. But I think that's because of my settings and at least you can save it as a XML-file manually.
I haven't tried this but it should work.
After getting form data, system will call page A.
page A will have javascript that gets query strings and builds the page accordingly.
After finishing page build, user can save current page with following statement in javascript
document.execCommand('SaveAs',true,'file.html');

How to get Youtube channel picture via username?

Any idea?
I checked the Youtube API that doesn't support this feature.
Is it possible?
I need to get the thumbnail picture via username directly.
for example:
I got a username named: communitychannel
and I want to get the following thumbnail picture:
http://i2.ytimg.com/vi/YVrqydZz3e4/default.jpg
Thanks your reply!!
I know I can retrieve thumbnail data by doing this. But the case is, I will get a Youtube member's subscription item list first via the following URL:
http://gdata.youtube.com/feeds/api/users/[USER_NAME]/subscriptions
From the Youtube official document, it indicate that the response data include tag. But I never see it...
If list length is 100, then I need to send total 101 requests to get the thumbnail data for each item. But it will consume too much network bandwidth to do that.
So, is any other way to accomplish the requirement? Thanks!! ;-)
You can get the users image by using a url like this:
http://gdata.youtube.com/feeds/api/users/communitychannel
You can get just the username and image thumbnail by appending a query string as described in the
partial responses api:
?fields=yt:username,media:thumbnail
You can get the response in json format to use easily in javascript by appending:
&alt=json-in-script&format=5
You can also specify a callback to execute when the response has loaded by appending: &callback=showImage
Your url now looks like this:
http://gdata.youtube.com/feeds/api/users/communitychannel?fields=yt:username,media:thumbnail&alt=json-in-script&format=5&callback=showImage
To use this in a page put it in a script tag like so:
<script type='text/javascript' src="your_url"/>
and the callback should look like this:
function showImage(data)
{
var name= data.entry.yt$username.$t;
var url = data.entry.media$thumbnail.url;
$(document).append("<img src='"+ url +"'/>");
}
You must make sure that the showImage callback function is defined before you load the data.
I have created a sample of loading a feed and the user images here (Make sure you change communitychannel to your own username or it won't work)
I can't see a better way of reducing your bandwidth than using the partial responses api;

JQuery and JSON

Here's something I want to learn and do. I have a JSON file that contains my product and details (size, color, description). In the website I can't use PHP and MySQL, I can only use Javascript and HTML. Now what I want to happen is using JQuery I can read and write a JSON file (JSON file will serve as my database). I am not sure if it can be done using only JQuery and JSON.
First thing, How to query a JSON file? (Example: I would search for the name and color of the product.)
How to parse the JSON datas that were searched into an HTML?
How to add details, product to the JSON file?
It will also be great if you can point me to a good tutorial about my questions.
I'm new to both JQuery and JSON.
Thanks!
Since Javascript is client side, you won't be able to write to the JSON file on the server using only Javascript. You would need some server side code in order to do that.
Reading and parsing the JSON file is not a problem though. You would use the jQuery.getJSON function. You would supply both a url and a callback parameter (data isn't needed, because you're reading a file, so no need to send data). The url would be the path to your JSON file, and the callback would be a function that uses the data.
Here's an example of what your code might look like. I don't know exactly what your JSON is, but if you have a set called "products" containing a set of objects with the details "name" and "price", this code would print those out:
$.getJSON("getProductJSON.htm",
function(data) {
$.each(data.products, function(i, item) {
var name = item.name;
var price = item.price;
// now display the name and price on the page here!
});
},
);
Basically, the data variable in $.getJSON makes the entire contents of the JSON available to you, very easily. And the $.each is used to loop over a set of JSON objects.

Categories