fetch fasta from ncbi via vanilla javascript - javascript

Is there a way to fetch sequence (with vanilla JS) from NCBI database link?
https://www.ncbi.nlm.nih.gov/protein/KTC77672.1?report=fasta&log$=seqview&format=text
I done this with other database (uniprot) and it worked. But NCBI might have some differences.
async function getData(url) {
const data = await fetch(url);
return data.text();
}
const test = getData('https://www.uniprot.org/uniprot/E5G0U9.fasta').then((r) => console.warn(r));
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>test</title>
</head>
<body>
test
</body>
<script src="test.js"></script>

The link in your question does not return FASTA format as plain text. It returns HTML using the pre tag to make it look like plain text.
You should be using the NCBI E-utilities API - in particular, the efetch method.
The URI for your example protein looks like this:
https://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=protein&id=KTC77672.1&rettype=fasta
So try that in your Javascript function. Seems to work in my Chrome console (see image).

Related

powershell parser html5 site

I need to log on site, and parse info.
I am trying to do this: powershell invoke-webrequest to log into website
But I can not find the form...
If I use function view page source in the browser I see only:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#ffffff"><link rel="icon" href="/frontend/favicon.ico">
<link href="/frontend/css/99.ad9d8c.css" rel="stylesheet"><link href="/frontend/css/style.aa5ad6.css" rel="stylesheet">
</head>
<body>
<div id="content"></div>
<script src="/frontend/js/modules/vendors~index.ad9d8c.chunk.js"></script>
<script src="/frontend/js/index.275be7.bundle.js"></script>
</body>
</html>
Update
I am try next, but this not work for me.
$ieObject = New-Object -ComObject 'InternetExplorer.Application'
$ieObject.Navigate('http://XXX.XXX.XXX.XXX:8090/frontend/login')
$currentDocument = $ieObject.Document
$currentDocument.IHTMLDocument3_getElementsByTagName("input") | Select-Object Type,Name
Error
You cannot call a method on a null-valued expression.

Element not iterable if in a separate javascript file

Hi I'm trying to learn javascript, from these tutorials: https://javascript.info/searching-elements-dom, but I've got stuck and not been able to find a solution to the issue. Apologies if this is a recurring question, but I was not able to find a solution using google, all the answers were that the script needed to be at the bottom of the page which I have. Basically, this works fine:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Javascript Learning</title>
</head>
<body>
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "test", "passed"
}
</script>
But putting the javascript in a separate file like I have will all the other lessons so far. Both .html and .js are in the same folder.
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Javascript Learning</title>
</head>
<body>
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script src="main.js"></script>
</body>
</html>
main.js:
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML);
}
The browser gives me this error:
Uncaught TypeError: elements is not iterable
file:///home/me/javascript/main.js:26
main.js:26:18
I assumed I must have made an error somewhere, so I cut and pasted straight out of the tutorial to make sure I had not made a syntax error, but still it works if inside the html file and not if it's in it's own separate javascript file. How can this be fixed, I'm fairly sure querySelectorAll is exactly what I need for my site, but I want the javascript in a separate file to keep my code consistent.

How to connect CSS and JS to HTML which is sent by Dart HttpServer?

I have created a Dart HttpServer which shows "HTML" code on the browser but I also want to connect "CSS" & "JS" to this HTML,
How should I do that? please help
HttpServer _server;
_server = await HttpServer.bind(InternetAddress.anyIPv4, port);
_server.listen((request) async {
request.response
..headers.contentType = ContentType.html
//HTML Code
..write('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<! -- <link rel="stylesheet" href="styles.css"> -->
<title>Hello World</title>
</head>
<body>
<p>Hello WOrld</p>
</body>
<! -- <script src="app.js"></script> -->
</html>
''');
await request.response.close();
}
PS 1: One Solution is to add CSS and JS codes in the HTML code which would work but is less efficient.
PS 2: I am using this dart code in a flutter project.
Just use html tag.
Don't neglect every source imported by html tag is a http request. you should handle these requests. Dart HttpServer doesn't handle these.

Access DOM from a different html file with JS

Is there a way to get the DOM elements from another HTML file rather than the elements from the HTML file that calls the JS file?
My idea is to make html templates, and render them in a main html file, depending on certain conditions imposed by the JS file.
Something like
var initScreen = new document(URL);
document.getElementById("body") = initScreen.getElementById("body");
supposing that this is the correct way.
Yep. You can fetch a remote (or local) file and then use createHTMLDocument:
document.querySelector(".the_replacer").addEventListener("click", () => {
fetch("https://cdn.rawgit.com/ryanpcmcquen/c22afdb4e6987463efebcd495a105d6d/raw/476e97277632e89a03001cb048c6cacdb727028e/other_file.html")
.then((response) => response.text())
.then((text) => {
const otherDoc = document.implementation.createHTMLDocument("Foo").documentElement;
otherDoc.innerHTML = text;
document.querySelector(".element_on_main_page").textContent = otherDoc.querySelector(".awesome_external_element").textContent;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="element_on_main_page">Replace me, please.</div>
<button class="the_replacer">Replace them.</button>
<script src="index.js"></script>
</body>
</html>
https://repl.it/#ryanpcmcquen/TurboTremendousProgramminglanguages
Here's the remote file's contents:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="awesome_external_element">Foobar.</div>
</body>
</html>
Browser support is not too bad. On the other hand fetch is pretty modern, so if you are going for legacy support you should use XMLHttpRequest.

ReferenceError: Papa is not defined

so I'm trying to setup PapaParser to parse a CSV file onto arrays that I can later use with another script to make graphs. So far I just want to paste the strings from my arrays onto the blank div, so I can see what's going on. I am new to this and have no idea how to import javascript libraries, so I copied the files into my public_html folder. Now NetBeans seems to see them.
Long story short I'm stuck at the beginning, I get a reference of ReferenceError: Papa is not defined when I try to run my parser.
Any input or a link to a tutorial on how to do this would be greatly appreciated (tried googling, found nothing of use). I've added my code so far...
Papa.parse("TopPercentilesCSV.csv", {
complete: function(results) {
console.log("Finished:", results.data);
}
});
.displaypanel {
border: 1px solid black;
width:400px;
height:400px;
margin:auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="index.js"></script>
<script src="PapaParse/papaparse.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
Change your code to this:
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="PapaParse/papaparse.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
First you have to include the library, then you can call function defined inside

Categories