How to dynamically change attributes depending on JSON data?

Question

I have the following miniapp:

[![enter image description here][1]][1]

When clicking on the elements on the left list, the info should change dynamically on the right div in relation to that clicked element.

I could get it work statically, but I don't know how to make it dynamic.

I have a JSON file with the data, and data is loading correctly and being parsed correctly.

data = '[{"name": "Hotel Sunny Palms","imgUrl": "images/sunny.jpg","rating": 5,"price": 108.00},{"name": "Hotel Snowy Mountains","imgUrl": "images/snowy.jpg","rating": 4,"price": 120.00},{"name": "Hotel Windy Sails","imgUrl": "images/windy.jpg","rating": 3,"price": 110.00},{"name": "Hotel Middle of Nowhere","imgUrl": "images/nowhere.jpg","rating": 4,"price": 199.00}]';

And I have the following HTML file:

<section class="container clear">
            <div class="header">
                <img class="logo" src="images/lmn-logo-white.svg">
            </div>
            <div class="inner-container clear">
                <aside class="hotels-list">
                    <ul>
                        <li class="hotel">1</li>
                        <li class="hotel">2</li>
                        <li class="hotel">3</li>
                        <li class="hotel">4</li>
                    </ul>
                </aside>
                <article class="hotel-description">
                    <div class="hotel-description-container clear">
                        <div class="hotel-pic-container">
                            <img id="hotel-pic" src="images/sunny.jpg" height="130px">
                        </div>
                        <div class="hotel-info">
                            <h6 id="hotel-name" >Hotel Sunny Plans </h6>
                            <div id="hotel-rating" class="hotel-rating"></div>
                            <div id="hotel-price" class="hotel-price">
                                $180.00
                                <span>Total hotel stay</span>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
    </section>

My JS file is this: I get the data to change, but in a static way. Basically what it does is find all the li items and change the info on the right div when clicked.

var hotelData = JSON.parse(data);

document.addEventListener('DOMContentLoaded', function() {
    var hotels = document.getElementsByClassName("hotel");
    for (var i = 0; i < hotels.length; i++) {
        hotels[i].addEventListener('click',function()
        {

         this.style.background = "#ccc";
         this.style.color = "#fff";

         var hotelName = document.getElementById("hotel-name");
         hotelName.innerHTML = hotelData[this].name;

         var hotelPrice = document.getElementById("hotel-price");
         hotelPrice.innerHTML =  "$" + hotelData[this].price + ".00" + "<span>Total hotel stay</span></div>";

         var hotelPic = document.getElementById("hotel-pic");
         hotelPic.src=hotelData[this].imgUrl;

         var hotelRating = document.getElementById("hotel-rating");
                if (hotelData[0].rating == 0) {
                    hotelRating.style.backgroundPosition = "0px 18px";
                }
                else if (hotelData[0].rating == 1) {
                    hotelRating.style.backgroundPosition = "0px 36px";
                }
                else if (hotelData[0].rating == 2) {
                    hotelRating.style.backgroundPosition = "0px 54px";
                }
                else if (hotelData[0].rating == 3) {
                    hotelRating.style.backgroundPosition = "0px 72px";
                }
                else if (hotelData[0].rating == 4) {
                    hotelRating.style.backgroundPosition = "0px 90px";
                }
                else if (hotelData[0].rating == 5) {
                    hotelRating.style.backgroundPosition = "0px 108px";
                }
        }); 
    };
});

Any advice? Thanks!!!

Answer 1

If you are okay with jQuery then here is the quick and very simple solution:

$(function () {
    var hotel_list = '';
    $.each(data, function(index, hotel) {
        hotel_list += '<li class="hotel" data-index="'+ index +'">'+ hotel.name +'</li>';
    });
    $("aside.hotels-list ul").html(hotel_list);

    $(document).on("click", "li.hotel", function () {
        var index = $(this).attr('data-index');
        load_hotel_info(index);
    });


    function load_hotel_info(index) {
        // Assuming the data variable is global...
        if(typeof data[index] !== undefined) {
            var hotel = data[index];
            $("#hotel-pic").attr('src', hotel.imgUrl);
            $("#hotel-name").html(hotel.name);
            $("#hotel-rating").html(hotel.rating);
            $("#hotel-price").html(hotel.price + '<span>Total hotel stay</span>');
        }
    }

    load_hotel_info(0); // When the page loads for the first time it should show the first item info on the right.

// If you are loading data from ajax then this won't be necessary. });

In this way the hotel list in the side will also load dynamically. And there isn't much to make it work. Just load the jquery by a script tag before the above code.

I hope it helps.