Utilizing Javascript to Parse Json Information

Question

Utilizing Javascript to Parse Json Information

For my latest project, I am attempting to retrieve JSON data from a specific URL and display it on a web page using only JavaScript.

This is all new to me. Can someone assist me in fetching the JSON data from the following link:

I have been experimenting with AJAX based on some research, but so far I haven't found the right solution:

 $(document).ready(function () {

 $('#retrieve-resources').click(function () {
 var displayResources = $('#display-resources');

 displayResources.text('Fetching data from JSON source...');

 $.ajax({
 type: "GET",
 url: "http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo",
 success: function(result)
 {
 console.log(result);
 var output="<table><thead><tr><th>LNG</th><th>GEONAMEID</th><th>COUNTRYCODE</th></thead><tbody>";
 for (var i in result)
 {
 output+="<tr><td>" + result.geonames[i].lng + "</td><td>" + result.geonames[i].geonameId + "</td><td>" + result.geonames[i].countrycode + "</td></tr>";
 }
 output+="</tbody></table>";

 displayResources.html(output);
 $("table").addClass("table");
 }
 });

 });
});

javascript json ajax

Answer 1

Answer №1

Utilize XMLHttpRequest for fetching data, as shown below:

function fetchData(){
  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          document.getElementById("output").innerHTML = request.responseText;
      }
  };
  request.open("GET", "http://api.example.com/data", true);
  request.send();
}

fetchData()

You can also opt for promise-based libraries like axios:

Include the library

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Sample code using axios:

function fetchData(){
  var response = axios.get('http://api.example.com/data')
  document.getElementById('output').innerHTML(response.data)
}

fetchData()

Answer 2

Utilize XMLHttpRequest for fetching data, as shown below:

function fetchData(){
  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          document.getElementById("output").innerHTML = request.responseText;
      }
  };
  request.open("GET", "http://api.example.com/data", true);
  request.send();
}

fetchData()

You can also opt for promise-based libraries like axios:

Include the library

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Sample code using axios:

function fetchData(){
  var response = axios.get('http://api.example.com/data')
  document.getElementById('output').innerHTML(response.data)
}

fetchData()

Answer 3

Answer №2

When integrating AJAX with external resources, ensure JSONP is being utilized.

$.ajax({
    type: "GET",
    url: "http://api.geonames.org/citiesJSON?",
    dataType: "jsonp",
    data: { .. },
    success: function( response ) {
        console.log( response );
    }
});

Here's a JQuery example and an example from StackOverflow. Also, check out this informative article on JSONP.

Answer 4

When integrating AJAX with external resources, ensure JSONP is being utilized.

$.ajax({
    type: "GET",
    url: "http://api.geonames.org/citiesJSON?",
    dataType: "jsonp",
    data: { .. },
    success: function( response ) {
        console.log( response );
    }
});

Here's a JQuery example and an example from StackOverflow. Also, check out this informative article on JSONP.

Utilizing Javascript to Parse Json Information

Answer №1

Answer №2

Similar questions

Error encountered when attempting to serialize object to JSON due to circular reference detection

What is the best way to trigger a unique modal dialog for every element that is clicked on?

Using Google Maps: How can I trigger an InfoWindow to open by hovering over a link?

Is there a way to effortlessly refresh the WooCommerce cart and receive updated HTML content all in one go?

Using jQuery Ajax to Retrieve Inner Text from Elements

Stop allowing special characters in Ajax requests (HTTP)

Despite population, MongooseJS still renders blank array

jq filter to exclude certain values in select statement by matching against an array of values

Inquiring about how to retrieve a complete list of elements from a Rest Api and convert it from a json string to a list of java objects

Encountering CORS problems when sending a request containing JSON data in the body

What is the best way to properly format the retrieved JSON string using Ext JS?

Is there a way to enable sync mode on dynatree?

Using Regex with JavaScript while ignoring letter case

The asynchronous request sent to the API action in MVC does not trigger the success event (ASP.NET Web API)

What is the best way to get jsDoc "import" to function properly in vscode?

Tips for avoiding Client DOM XSS vulnerability in JavaScript

Transferring items between different containers without using innerHTML

Discovering the technique to interact with obscured objects through a haze of PointsMaterial in three.js

Does the resolve function within a Promise executor support async operations?

Encoding in AJAX Post Requests