Develop Reference

How to turn number into star rating while Ajax success using JavaScript, jQuery in Spring Boot?

I am working on a spring boot web application. I have a page where I need to show star rating system. Number of rating is stored in database. Format is: 1, 1.5, 2, 2.5...up to 5. I want to convert these numbers into stars. How should I do that after getting ajax response success from MySql DB.
function getreview() {
var productid = document.getElementById('pid').value;
var url = "/api/getcustomerreview";
$.post(url, {
productid : productid,
}, function(data, status) {
if (data.status == "OK") {
if (data.statusCode == 1) {
var div = "", des = "";
var list = data.response;
var listlength = list.length;
if(listlength > 0){
for(var i = 0; i < listlength; i++) {
var rating = list[i].reviewrating;
var stars = "";
console.log("Customer review rating: "+rating); // for product id
15 there is rating number 5 and 4
div = div + "<div class=\"row\"><div class=\"col-lg-7\"><div class=\"review-wrapper\"><div class=\"single-review\"><div class=\"review-img\">"
+"<img src=\"public/web/assets/images/1.png\" alt=\"\"/></div><div class=\"review-content\">"
+"<div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">"
+"<h4>"+list[i].customername+"</h4></div><div class=\"rating-product\"><i class=\"ion-android-star\"></i>"
+"</div></div><div class=\"review-left\">Reply</div>"
+"</div><div class=\"review-bottom\"><p>"+list[i].reviewmessage+"</p></div></div></div>"
+"<div class=\"single-review child-review\"><div class=\"review-img\">\<img src=\"public/web/assets/images/2.png\" alt=\"\"/>\</div>"
+"<div class=\"review-content\"><div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">"
+"<h4>"+list[i].customername+"</h4></div><div class=\"rating-product\"><i class=\"ion-android-star\"></i>"
+"</div></div><div class=\"review-left\">Reply</div>"
+"</div><div class=\"review-bottom\"><p>"+list[i].reviewmessage+"</p></div></div></div>"
+"</div></div></div>";
document.getElementById('des-details3').innerHTML = div;
}
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
}
Below is div tag is to display star according to rating number that has been stored in database.
<div class=\"rating-product\"><i class=\"ion-android-star\"></i></div>

You can simply use for-loop with rating as counter end value then on each iteration append your icon in some variable using += and finally append this inside html which is already generated .
Demo Code :
var div = "",
des = "";
//just for demo
var list = [{
"customername": "abc",
"reviewmessage": "Good",
"reviewrating": 4.5
}, {
"customername": "xyz",
"reviewmessage": "Very good",
"reviewrating": 5
}, {
"customername": "xyz",
"reviewmessage": "Very good",
"reviewrating": 3.5
}] //data.response;
var listlength = list.length;
if (listlength > 0) {
for (var i = 0; i < listlength; i++) {
var rating = parseInt(list[i].reviewrating);
var stars = "";
//loop through rating...no
for (var j = 1; j <= rating; j++) {
stars += '<i class="fas fa-star" style="color:gold"></i>'; //append new star on each iteration..
}
//check if there is `.` in number..means .5
if (list[i].reviewrating.toString().indexOf('.') != -1) {
//half star
stars += '<i class="fas fa-star-half-alt" style="color:gold"></i>'
}
//pass them here
div = div + "<div class=\"row\"><div class=\"col-lg-7\"><div class=\"review-wrapper\"><div class=\"single-review\"><div class=\"review-img\">" +
"<img src=\"public/web/assets/images/1.png\" alt=\"\"/></div><div class=\"review-content\">" +
"<div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">" +
"<h4>" + list[i].customername + "</h4></div><div class=\"rating-product\">" + stars +
"</div></div><div class=\"review-left\">Reply</div>" +
"</div><div class=\"review-bottom\"><p>" + list[i].reviewmessage + "</p></div></div></div>" +
"<div class=\"single-review child-review\"><div class=\"review-img\">\<img src=\"public/web/assets/images/2.png\" alt=\"\"/>\</div>" +
"<div class=\"review-content\"><div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">" +
"<h4>" + list[i].customername + "</h4></div><div class=\"rating-product\">" + stars +
"</div></div><div class=\"review-left\">Reply</div>" +
"</div><div class=\"review-bottom\"><p>" + list[i].reviewmessage + "</p></div></div></div>" +
"</div></div></div>";
document.getElementById('des-details3').innerHTML = div;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css" integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="des-details3"> </div>
Other way you can use star-rating-svg plugin to achieve this . So, you just need to initialize them with the value of rating .
Demo Code :
var div = "",
des = "";
//just for demo
var list = [{
"customername": "abc",
"reviewmessage": "Good",
"reviewrating": 4.5
}, {
"customername": "xyz",
"reviewmessage": "Very good",
"reviewrating": 5
}, {
"customername": "xyz",
"reviewmessage": "Very good",
"reviewrating": 3.5
}] //data.response;
var listlength = list.length;
if (listlength > 0) {
$("#des-details3").empty()
for (var i = 0; i < listlength; i++) {
var rating = parseFloat(list[i].reviewrating);
div = "<div class=\"row\"><div class=\"col-lg-7\"><div class=\"review-wrapper\"><div class=\"single-review\"><div class=\"review-img\">" +
"<img src=\"public/web/assets/images/1.png\" alt=\"\"/></div><div class=\"review-content\">" +
"<div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">" +
"<h4>" + list[i].customername + "</h4></div><div class=\"rating-product\"></div></div><div class=\"review-left\">Reply</div>" +
"</div><div class=\"review-bottom\"><p>" + list[i].reviewmessage + "</p></div></div></div>" +
"<div class=\"single-review child-review\"><div class=\"review-img\">\<img src=\"public/web/assets/images/2.png\" alt=\"\"/>\</div>" +
"<div class=\"review-content\"><div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">" +
"<h4>" + list[i].customername + "</h4></div><div class=\"rating-product\"></div></div><div class=\"review-left\">Reply</div>" +
"</div><div class=\"review-bottom\"><p>" + list[i].reviewmessage + "</p></div></div></div>" +
"</div></div></div>";
$("#des-details3").append(div) //append your div
//then intialize your rating...
$("#des-details3 .row:last .rating-product").starRating({
initialRating: rating,
strokeColor: '#894A00',
strokeWidth: 10,
starSize: 25
});
}
}
.rating-product {
pointer-events: none/*use this if you don't want user to change rating*/
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-rating-svg#3.5.0/src/css/star-rating-svg.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/star-rating-svg#3.5.0/src/jquery.star-rating-svg.js"></script>
<div id="des-details3"> </div>

Use array.fill() then convert the array to text:
const s5 = ["\u2606", "\u2606","\u2606", "\u2606", "\u2606"];
s5.fill('\u2B50',0,rating);
s5text = s5.join("");

jquery+on iterating loop how can i know which element is clicked

I am having a list which is nothing but country flag, country name and country code which actually i derived from JSON
and i had written for loop to render the html elements like this
data =
[
{
"name": "INDIA ",
"code": "93",
"url": 'https://www.countryflags.io/in/flat/64.png'
}, {
"name": "JAPAN ",
"code": "355",
"url": 'https://www.countryflags.io/jp/flat/64.png'
}]
for (var i = 0; i < data.length; i++) {
var countryName = data[i].name;
var countrtDialCode = data[i].code;
var countryUrl = data[i].url;
var badge = document.createElement('div');
badge.className = 'badge';
badge.innerHTML =
'<div id="listSection">'+
'<div style="display:flex">'+
'<div id="flagSection">'+'<img style="height:10px;width:20px;margin-top:4px;" src='+countryUrl+'>'+'</div>'+' '+
'<div id="nameSection">' + countryName + '</div>' +' '+
'<div id="codeSection">' + countrtDialCode + '</div>'
+'</div>'+
'</div>'
document.getElementById('countries-list').appendChild(badge);
}
also i have a divs section
<div id="inputSection"> </div>
<div id="countries-list">
</div>
and i have done like when you click on input section the list will come and i can choose from the list and i need ONLY the flag should be shown
<script type="text/javascript">
$(document).ready(function(){
$('#countries-list').addClass('hideSection').removeClass('showSection')
});
$('#inputSection').click(function(){
$('#countries-list').addClass('showSection').removeClass('hideSection')
})
</script>
so when i click india JSON from list , i should display indian flag in inputSection again if i click input section list should come and again if i choose NEPAL, indian flag should be replaced with NEPAL flag.
Have 2 problem.First one i am unable to write click function in INNERHTML to identify which country clicked and second how to retrieve the flag section and show it in inputSection.
Any fiddle will be highly helpful and thankful

If all you need is a clone of the flag section in the input section, then this is all you need:
$('.listSection').on('click', function() {
$('#inputSection').html( $('.flagSection', this).clone() );
});
However, you have to convert every occurrence of id in the HTML in your JS to class, as in the working demo below. Id attribute values should be unique.
$(function() {
const data = [{
"name": "INDIA ",
"code": "93",
"url": 'https://www.countryflags.io/in/flat/64.png'
}, {
"name": "JAPAN ",
"code": "355",
"url": 'https://www.countryflags.io/jp/flat/64.png'
}];
for (var i = 0; i < data.length; i++) {
var countryName = data[i].name;
var countrtDialCode = data[i].code;
var countryUrl = data[i].url;
var badge = document.createElement('div');
badge.className = 'badge';
badge.innerHTML =
'<div class="listSection">'+
'<div style="display:flex">'+
'<div class="flagSection">'+'<img style="height:10px;width:20px;margin-top:4px;" src='+countryUrl+'>'+'</div>'+' '+
'<div class="nameSection">' + countryName + '</div>' +' '+
'<div class="codeSection">' + countrtDialCode + '</div>'
+'</div>'+
'</div>'
document.getElementById('countries-list').appendChild(badge);
}
$('.listSection').on('click', function() {
console.log( {name: $('.nameSection',this).text(), code: $('.codeSection', this).text()} );
$('#inputSection').html( $('.flagSection', this).clone() );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inputSection"> </div>
<div id="countries-list">
</div>
NOTE
Since there's not mention in the documentation of .html( jQueryObject ) even thought it works in the above demo, I'll provide an alternative that uses .empty() and .append() methods:
$('#inputSection').empty().append( $('.flagSection', this).clone() );

Dynamically change carousel images based on click event

I have 3 elements arranged in a row. I want to show a carousel pop-up on click of the columns in the row. The issue is I am not able to change the images of carousal based on selected column element.
Here is my complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<script>
function process() {
var shops = JSON.parse('{ "id": "shopping", "categories": [ { "id": "Amazon", "name": "Amazon", "link": "https://images-na.ssl-images-amazon.com/images/G/01/SellerCentral/legal/amazon-logo_transparent._CB303899249_.png", "images": [ { "href": "https://images-na.ssl-images-amazon.com/images/G/01/credit/img16/CBCC/marketing/marketingpage/products._V524365396_.png" }, { "href": "http://static4.uk.businessinsider.com/image/575adbe2dd0895c4098b46ba/the-50-most-popular-products-on-amazon.jpg" } ] }, { "id": "Google", "name": "Google", "link": "http://pngimg.com/uploads/google/google_PNG19644.png", "images": [ { "href": "https://www.clipartmax.com/png/middle/147-1476512_google-google-products-logos-png.png" }, { "href": "https://xvp.akamaized.net/assets/illustrations/unblock-google/unblock-google-with-a-vpn-fc1e32f59d9c50bae315c2c8506a91e2.png" } ] }, { "id": "Apple", "name": "Apple", "link": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Apple_Logo.svg/2000px-Apple_Logo.svg.png", "images": [ { "href": "https://c.slashgear.com/wp-content/uploads/2018/03/apple-mfi-logos-update-2018-980x620.jpg" }, { "href": "https://support.apple.com/library/content/dam/edam/applecare/images/en_US/applemusic/itunes-apple-logo-apple-music-giftcard.jpg" } ] } ] }');
var row = 1;
var content = "";
shops = shops.categories;
for(var i=0; i< shops.length; i++) {
if(row == 1) {
content += '<div class="row">'
}
content += '<div class="col-md-4 col-sm-12" data-toggle="modal" onclick="processCarousel(shops[i])" data-target="#myModal">';
content += '<img style="border: 1px solid red" src="'+shops[i].link+'" width="100%" height="100%"/></div>';
if(row == 3) {
row = 0;
content += '</div>';
}
row++;
}
document.getElementById("placeholder").innerHTML = content;
processCarousel();
}
function processCarousel(input) {
alert(input);
var m = ['img_chania.jpg','img_chania2.jpg', 'img_flower.jpg','img_flower2.jpg'];
var carouselInner = document.getElementById("carousel-inner");
var carouselIndicators = document.getElementById("carousel-indicators");
var innerContent = "";
var indicatorsContent = "";
for(var i=0 ; i< m.length ; i++) {
var c = "";
if(i == 0) {
c = " active";
}
innerContent += '<div class="item'+c+'"><img src="'+m[i]+'"><div class="carousel-caption"></div> </div>';
indicatorsContent += '<li class='+c+'data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>';
}
carouselInner.innerHTML = innerContent;
carouselIndicators.innerHTML = indicatorsContent;
var carouselExampleGeneric = document.getElementById("carousel-example-generic");
carouselExampleGeneric.carousel();
}
</script>
</html>
The above code generates the below output:
On click of any image it is loading the carousal but the images of carousal are fixed to my array elements var m = ['img_chania.jpg','img_chania2.jpg', 'img_flower.jpg','img_flower2.jpg']; as mentioned in my above code.
But I want to show only the selected images which are present in my input json shops.categories[selectedItem].images
I tried using onclick javascript event on column element, but the code is not recognising it. What is the correct way to do this.
I want to do this using plain javascript.

First you need to get rid of the call to processCarousel(); in line 39.
Your main problem is, that inside of your content variable you are passing the string of the argument variable rather than the argument itself. Try this instead:
content += '<div class="col-md-4 col-sm-12" data-toggle="modal" onclick="processCarousel(' + i + ')" data-target="#myModal">';
This way you are just passing the index of the category that needs to be rendered.
Then you will have to have the shops object available inside of the processCarousel function as well, so I moved it up, outside the function scope.
This will result in further problems inside of you processCarousel function. You will have to set your your images like this var m = shops[i].images; instead of var m = ['img_chania.jpg', 'img_chania2.jpg', 'img_flower.jpg', 'img_flower2.jpg'];
This will throw another error further down.
innerContent += '<div class="item' + c + '"><img src="' + m[i] + '"><div class="carousel-caption"></div> </div>'; will not work. Instead you will have to use m[i].href as your source inside your image tag.
This will now pass the config to the Carousel which will then render just fine.
You might want to think about giving variables speaking names and avoiding variables like 'm'.
var shops = JSON.parse('{ "id": "shopping", "categories": [ { "id": "Amazon", "name": "Amazon", "link": "https://images-na.ssl-images-amazon.com/images/G/01/SellerCentral/legal/amazon-logo_transparent._CB303899249_.png", "images": [ { "href": "https://images-na.ssl-images-amazon.com/images/G/01/credit/img16/CBCC/marketing/marketingpage/products._V524365396_.png" }, { "href": "http://static4.uk.businessinsider.com/image/575adbe2dd0895c4098b46ba/the-50-most-popular-products-on-amazon.jpg" } ] }, { "id": "Google", "name": "Google", "link": "http://pngimg.com/uploads/google/google_PNG19644.png", "images": [ { "href": "https://www.clipartmax.com/png/middle/147-1476512_google-google-products-logos-png.png" }, { "href": "https://xvp.akamaized.net/assets/illustrations/unblock-google/unblock-google-with-a-vpn-fc1e32f59d9c50bae315c2c8506a91e2.png" } ] }, { "id": "Apple", "name": "Apple", "link": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Apple_Logo.svg/2000px-Apple_Logo.svg.png", "images": [ { "href": "https://c.slashgear.com/wp-content/uploads/2018/03/apple-mfi-logos-update-2018-980x620.jpg" }, { "href": "https://support.apple.com/library/content/dam/edam/applecare/images/en_US/applemusic/itunes-apple-logo-apple-music-giftcard.jpg" } ] } ] }');
var row = 1;
var content = "";
shops = shops.categories;
function process() {
for (var i = 0; i < shops.length; i++) {
if (row == 1) {
content += '<div class="row">'
}
content += '<div class="col-md-4 col-sm-12" data-toggle="modal" onclick="processCarousel(' + i + ')" data-target="#myModal">';
content += '<img style="border: 1px solid red" src="' + shops[i].link + '" width="100%" height="100%"/></div>';
if (row == 3) {
row = 0;
content += '</div>';
}
row++;
}
document.getElementById("placeholder").innerHTML = content;
}
function processCarousel(i) {
//var m = ['img_chania.jpg', 'img_chania2.jpg', 'img_flower.jpg', 'img_flower2.jpg'];
var m = shops[i].images;
var carouselInner = document.getElementById("carousel-inner");
var carouselIndicators = document.getElementById("carousel-indicators");
var innerContent = "";
var indicatorsContent = "";
for (var i = 0; i < m.length; i++) {
var c = "";
if (i == 0) {
c = " active";
}
innerContent += '<div class="item' + c + '"><img src="' + m[i].href + '"><div class="carousel-caption"></div> </div>';
indicatorsContent += '<li class=' + c + 'data-target="#carousel-example-generic" data-slide-to="' + i + '"></li>';
}
carouselInner.innerHTML = innerContent;
carouselIndicators.innerHTML = indicatorsContent;
var carouselExampleGeneric = document.getElementById("carousel-example-generic");
//carouselExampleGeneric.carousel();
}

sort function in javascript is not working

I am trying to write a code to display a table using ajax call and sort the columns when the button is clicked. It seems like i am making error in the sort function but unable to solve it and the whole column is getting replaced with the smallest value of the age.I also have doubt in the display part.
here is my code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http.css" >
</head>
<title>
</title>
<body>
<table id="link" border="1">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Place</td>
</tr>
</thead>
</table>
<script>
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
var obj = JSON.parse(req.responseText);
parsedfun(obj);
}
};
req.open("GET", "xml.txt");
req.send();
function parsedfun(obj) {
var out = "";
for (var i = 0; i < obj.length; i++) {
out = out + '<tr><td class="namesort">' + obj[i].name + '</td><td class="agesort">' + obj[i].age + '</td><td class="placesort">' + obj[i].place + '</td></tr>';
$("#link").html(out);
$(".clk").click(function() {
$.getJSON("xml.txt", function(obj) {
$("td").each(function(index, value) {
obj.sort(function(a, b) {
if (a.age < b.age) {
return 1;
} else {
return -1;
}
});
$(".agesort").html(obj[index].age);
});
});
});
}
}
</script>
<button class="clk">sort the age</button>
<div class="division">
</div>
</body>
</html>
and here is the "xml.txt" file
[{
"name": "x",
"age": 21,
"place": "Hyderabad"
}, {
"name": "y",
"age": 28,
"place": "Chennai"
}, {
"name": "z",
"age": 20,
"place": "Coimbatore"
}, {
"name": "a",
"age": 19,
"place": "Kolkata"
}, {
"name": "b",
"age": 22,
"place": "Mumbai"
}, {
"name": "c",
"age": 16,
"place": "Mangalore"
}]

There's a couple of issues here. Firstly, you're setting the html() of the table which is wiping out the thead row. Use append() instead.
You also can use a single delegated event handler on the button. Your current code attaches a new event to that button for every single object in the array, which is redundant.
Lastly when you do the sorting you don't need to make another AJAX request as you can simply take the data you've got in the table and sort that. Try this:
function parsedfun(obj) {
var out = "";
for (var i = 0; i < obj.length; i++) {
out = out + '<tr><td class="namesort">' + obj[i].name + '</td><td class="agesort">' + obj[i].age + '</td><td class="placesort">' + obj[i].place + '</td></tr>';
}
$("#link").append(out);
}
$(document).on('click', '.clk', function() {
$('#link tr').sort(function(a, b) {
var aAge = parseInt($(a).find('td:eq(1)').text(), 10);
var bAge = parseInt($(b).find('td:eq(1)').text(), 10);
return aAge < bAge ? -1 : aAge > bAge ? 1 : 0;
}).appendTo('#link')
});
Working example
Also note that your <script> tag should also be placed in the <head> or just before the </body>, and it's a little odd to call the file xml.txt when it's returning JSON.
To make things simpler you could use jQuery for the AJAX request as you're already using it for element events and selections.
<script type="text/javascript">
$(function() {
$.getJSON('xml.txt', function(data) {
var out = "";
for (var i = 0; i < obj.length; i++) {
out = out + '<tr><td class="namesort">' + obj[i].name + '</td><td class="agesort">' + obj[i].age + '</td><td class="placesort">' + obj[i].place + '</td></tr>';
}
$("#link").append(out);
});
$(document).on('click', '.clk', function() {
$('#link tr').sort(function(a, b) {
var aAge = parseInt($(a).find('td:eq(1)').text(), 10);
var bAge = parseInt($(b).find('td:eq(1)').text(), 10);
return aAge < bAge ? -1 : aAge > bAge ? 1 : 0;
}).appendTo('#link')
});
});
</script>

innerHTML is not getting updated

I am trying to get the data from the string and i want to display it in my html.
Here is the code what i tried
var jsn = {
"channels": [{
"name": "video1",
"image": "images/bodyguard.jpg"
}, {
"name": "video2",
"image": "images/bodyguard.jpg"
}, {
"name": "video3",
"image": "images/bodyguard.jpg"
}, {
"name": "video4",
"image": "images/bodyguard.jpg"
}, {
"name": "video5",
"image": "images/bodyguard.jpg"
}]
};
var id = document.getElementById("menu_list");
var inHtm = "";
var channels = jsn.channels.length;
var cha = jsn.channels;
alert("channels : " + channels);
if (channels != undefined) {
for (var i = 0, len = channels; i < len; ++i) {
var item = cha[i].name;
alert(item);
//var name = item.name;
var image = cha[i].image;
inHtm += '<div class="menu"><a href="javascript:void(0);" onkeydown="Main.keyDown();" >';
inHtm += '<img src="' + image + '"/>';
inHtm += '</a></div>';
}
alert(inHtm);
in1.innerHtml = inHtm;
}
My Fiddle
It is assigning the values to inHtm but my innerHTML is not getting updated. I want to display the image in my html

This:
in1.innerHtml = inHtm;
Should be:
id.innerHTML = inHtm;
Your object is id not in1 and the property is innerHTML not innerHtml.
Also I suggest using console.log() for degbugging instead of alert(). alerts are painful especially in loops, and with console.log() you can dump entire objects, whereas alert will just show "object".
Corrected fiddle