Get JSON Data jQuery Cognizant Handson Program

The given URL contains various user information.

https://reqres.in/api/users?page=2

Design a webpage that should display the contents of this JSON response (ONLY THE ‘ID’ AND ‘EMAIL’ ) when the user clicks the button ‘Click to Load Data’ with the id ‘btn-id’.   The contents of the JSON should be displayed in the ‘div’ tag with the id ‘data-id’.  Refer to the below image for more information.

Note:

1. Do not alter the file, country.html

2. Write your code in country.js file

3. Avoid writing the jQuery ‘document ready’ method for the proper web page visibility.

4. Do not use ‘ES6’ features.

country.js

$("#btn-id").click(function() {
    //get data    
    $.getJSON("https://reqres.in/api/users?page=2", function(json) {
      $("#data-id").html('')
      json.data.forEach(function(jd) {
        $("#data-id").append("<ul><li>"+jd.id + "--" + jd.email + '<br>');
      })
    });
  });