add click function to retrieve related data from object in web api - arrays

Question

this is my starter work
I just call the web API and retrieved the hotel names
(function() {
var myAPI = "https://gmgapi.azurewebsites.net/SystemParameters/Hotels/GetAll?langId=en";
$.getJSON(myAPI, {
format: "json"
})
.done(function(data) {
doSomething(data);
console.log("Load was performed.");
});
})();
function doSomething(data) {
for (var i = 0; i < data.length; i++) {
var div = $("<div>");
var label = $("<label>").text(data[i].DisplayValue);
$(div).append(label);
$('#result').append(div);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"> </div>
now i want to click on hotel name to get other data related to hotel like deescription and other data
the proplem faced me that i couldn't get the value correctely when i clicked on html to retrive the data
i tried to declare var and use it but not worked for me like showed here
(function () {
var myAPI = "http://gmgapi.azurewebsites.net/SystemParameters/Hotels/GetAll?langId=en";
$.getJSON(myAPI, {
format: "json"
})
.done(function (data) {
doSomething(data);
doSomethinginClick(data);
});
})();
function doSomething(data) {
for (var i = 0; i < data.length; i++) {
var div = $("<div>");
var h1 = $("<h1>").text(" Hotel name : " + data[i].DisplayValue);
$(div).append(h1);
$('#result').append(div);
}
}
function doSomethinginClick(data) {
// var clicked = data[this].Id;
var clicked = data[0];
$('h1').click(function () {
var divx = $("<div>");
var h1 = $("<h1>").text(" Hotel name : " + clicked.DisplayValue);
var p = $("<p>").text(" Hotel Description : " + clicked.DisplayValueDesc);
var p2 = $("<p>").text(" CurrencyTitle : " + clicked.CurrencyTitle);
var price = $("<p>").text(" PriceStart : " + clicked.PriceStart);
var rate = $("<p>").text(" Rate : " + clicked.Rate);
$(divx).append(h1, p, p2, price, rate);
$('#resultsec').append(div);
});
}
<div id="result">
</div>
<div id="resultsec">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

First of, In the method doSomethinginClick(), where you define the h1 click function, you have missed to define the div element which you are appending to.
Add the following
var div = $("<div>");
To make the solution more dynamic, you can store a identifier on the h1 tag thats connect the tag to an hotel.
I added a custom field called hotelId on the html tag for this
function doSomething(data) {
for (var i = 0; i < data.length; i++) {
var h1 = $("<h1></h1>").text(" Hotel name : " + data[i].DisplayValue);
h1.data('hotelId', i);
$("#result").append(h1);
}
}
function doSomethinginClick(data) {
$('h1').click(function () {
var id = $(this).data('hotelId');
var clicked = data[id];
var h1 = $("<p>").text(" Hotel name : " + clicked.DisplayValue);
var p = $("<p>").text(" Hotel Description : " + clicked.DisplayValueDesc);
var p2 = $("<p>").text(" CurrencyTitle : " + clicked.CurrencyTitle);
var price = $("<p>").text(" PriceStart : " + clicked.PriceStart);
var rate = $("<p>").text(" Rate : " + clicked.Rate);
var div = $("<div>");
$(div).append(h1, p, p2, price, rate);
$('#resultsec').append(div);
});
}
Here's a plunker with mocked data