AJAX and DOM Manipulation

If you know JQuery JavaScript library, you can use it to make AJAX calls and to manipulate DOM to fullfil below requirements.

On page load, fetch users from http://192.155.90.208/users.json using AJAX and show only names in Column 1 of your web page. Each user name shall be in a separate div (so all names would be vertically stacked).

Add an HTML form in Column 2 of you web page that shall have input fields i.e. name, gender, interests, country and city of type text, radio, checkboxes, and dropdown lists, respectively and a standard button labeled as Show Data.

When a user name in Column 1 is clicked, populate the form’s all input fields accordingly. See users.json, only given values shall be listed as valid values for gender and interests in the form. (You can expect no other value for interest would appear or is valid, so feel free to hard code list of checkboxes, but if you create them dynamically, that is better but not required). Althought there would be multiple checkboxes, but click only those that match with interests of currently selected user.

When user click Show Data button, show selected fields name and values in tabular form below the Show Data button. In case of radio buttons and checkboxes, display what user selected.

Populate countries and cities lists form this end point. http://192.155.90.208/locations.json When a country is selected, auto load cities list as per country selected.

If above links do not work, you can download both files from Here put in your project.