CODEWITHSUNDEEP
javascriptjqueryjsonajax
wd_ski
wd_ski

Reputation: 1

URL for a parameter? jQuery, Ajax, JSON

Create an html page with a table and a button. When the button is clicked show results for the first 10 planets from the Star Wars api. The information in the table are:

Planet Name Population Climate Gravity There should be a function that makes the call to the api for the planets ( should have URL for a parameter ) There should be a function that prints planets in to the table **API URL: ** https://swapi.co/api/planets/?page=1

This is my answer but i don't know how to pass the url as parametar... Help?!

$(document).ready(function () {

  let btn = $(".btn")
  btn.on("click", function bla () {
    $.ajax({
        url: "https://swapi.co/api/planets/?page=1",
        success: function (response) {
            let planetsObj = response;
            console.log(planetsObj)
            for (let i = 0; i < planetsObj.results.length; i++) {
                let firstTen = `<tr>  <td> ${planetsObj.results[i].name}</td> <td>${planetsObj.results[i].population} </td>  <td>${planetsObj.results[i].climate}</td> <td>${planetsObj.results[i].gravity}</td></tr>`
                $(".table").append(firstTen)
            }
        }
    })
  })

})

Upvotes: 0

Views: 455

Answers (2)

EdHuamani
EdHuamani

Reputation: 1897

I don't fully understand your question, but I hope it will help you. I give you an example:

Note: Since ES6, you can use template literals

$(document).ready(function () {
	let btn = $(".btn");
	let btn_search = $("#btn_search");
	let table = $(".table");

	btn.on("click", function (e) {
		const page = $(this).attr('data-page');
		const searchText = "";
		callToApi(page, searchText);
	});

	btn_search.on("click", function (e) {
		const searchText = $("#search").val();
		const page = 1; // default value
		table.empty(); // clean table
		callToApi(page, searchText);
	});

	function callToApi(page, searchText) {
		$.ajax({
			// Template literals
			url: `https://swapi.co/api/planets/?page=${page}&search=${searchText}`,
			success: function (response) {
				let planetsObj = response;
				for (let i = 0; i < planetsObj.results.length; i++) {
					let firstTen = `<tr>  <td> ${planetsObj.results[i].name}</td> <td>${planetsObj.results[i].population} </td>  <td>${planetsObj.results[i].climate}</td> <td>${planetsObj.results[i].gravity}</td></tr>`
					table.append(firstTen)
				}
			}

		})
	}

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label>Search:</label>
<input id="search" />
<button id="btn_search">
Search
</button>

<table class="table">

</table>
<br/>
<br/>

<button class="btn" data-page="1">
Load Page 1
</button>
<button class="btn" data-page="2">
Load Page 2
</button>

Upvotes: 1

Titus
Titus

Reputation: 22474

You could define a function that accepts a parameter and call it from the buttons on click listener callback function.

Here is an example:

$(".btn").on("click", function() {
  getPlanets("https://swapi.co/api/planets/?page=1")
});

function getPlanets(URL) {
  $.ajax({
    url: URL,
    success: function (response) {
        ...  
      }
    }
  });
}

Upvotes: 1

Related Questions