hi how can i fetch json from a url using javascript

Question

I am trying to build a browser extension with key functionality including fetching a text input from html pages and concat it with a URL and fetch json from that concated URL.

I want to know how to fetch json from a URL to a variable using JavaScript.

This is the html script to grab the user inserted text.

<html>
<body>
<input type="text" id="search" name="Name" maxlength="10" class="searchField" autocomplete="off" title="" ><br>
  </p>
</form>
<p align="center">
<button type="button" id="srchbutton" style="background-color:Thistle;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:%"> Search</button>
</p>
<script language="javascript" type="text/javascript" src="thanq.js">
    var button= document.getElementById('srchbutton');
    button.onclick= linkprocess();
    console.log("hi there");
</script>
</body>
</html>

and this is the JavaScript in which I am trying to access the json from URL.

var oldlink='URL';
var newlink;
function linkprocess(links){
    var text= document.getElementById('search');
   newlink=oldlink+text;
   GetJson(newlink);
   console.log(newlink);
}

Try out this `$.getJSON('newlink', function(data) { console.log(data) })` — Nishant Nair, Jan 10 '17 at 09:30
Use jQuery's `$.getJSON()` or learn raw `XMLHttpRequest`s, which is what I recommend if you're learning. — StackSlave, Jan 10 '17 at 09:33

score 0 · Answer 1 · answered Jan 10 '17 at 09:26

0

You can use xmlhttp request in pure javascript to do this. Take a look at this w3 schools article: JSON Http Request

To simplify the code written, you could you jQuerys $.get() or $.ajax() methods once you are comfortable with the mechanism.

answered Jan 10 '17 at 09:26

hairmot

2,975
1
13
26

score 0 · Answer 2 · answered Jan 10 '17 at 09:33

0

Or you can use the modern fetch API, e.g:

const searchVal = document.getElementById('search').value;

fetch('http://someprefix/' + searchVal)
  .then(response => response.json())
  .then(data => {
    console.log('Fetched:', data);
  })
  .catch(err => {
    console.error('Fetch error:', err);
  });

answered Jan 10 '17 at 09:33

Dominic

62,658
20
139
163

Just don't expect it to work on many a Browser. – StackSlave Jan 10 '17 at 09:35
Yep, you can load a polyfill - https://github.com/github/fetch, but this looks like more of an experiment than production code – Dominic Jan 10 '17 at 09:36
@PHPglue - it doesn't work natively in IE, and the "new IE", which is Safari - otherwise support is pretty universal – Jaromanda X Jan 10 '17 at 10:05

hi how can i fetch json from a url using javascript

2 Answers2