JQUERY/AJAX-multiply classes based on content number

user_13142071 0
Viewed 56

I'm trying to extract specific data and send them to the client side so in order to achieve that I used AJAX like below :

<script type ="text/Javascript">


    $(document).ready(() => {
    $.ajax({
    type: 'GET',
    dataType : 'json',
    url: '/envoi/events/',
        })
    .done(function(data) {
    for(let i =0; i< data.length;i++) {
    console.log(data[i].events.eventName);
    $("#event1").html(`<b>${data[i].events.eventName}</b>`) // event1 is the id of field name
    $("#time1").html(`<b>${data[i].events.eventDate} - ${data[i].events.targetReminder} | 
 ${data[i].events.targetAmPM} </b>`)// time1is the id of field time and date

 $("#comment1").html(`<b>${data[i].events.caption}</b>`) // comment1 is the id of field description

 $("#location1").html(`<b>${data[i].events.location}</b>`) // location1 is the id of field location
    }
})
.fail(function(xhr, status, error) {
    console.log(error);
})
.always(function(data){
});
})
</script>

and this is the output

enter image description here

this script works perfectly and fill one container with the requested values but what I'm looking for is to fill every container and multiply them based on data found from my db

which mean : 1- if there is more than one data data[i].events.eventName or other another container must be created and get filled by the new value

the HTML code is below :

<div class="card">
                                        <div class="card-header" id="headingOne-1">
                                            <script type ="text/Javascript">


                                                $(document).ready(() => {
                                                    $.ajax({
                                                    type: 'GET',
                                                    dataType : 'json',
                                                    url: '/envoi/events/',
                                                    })
                                                    .done(function(data) {
                                                        for(let i =0; i< data.length;i++) {
                                                            console.log(data[i].events.eventName);

                                                        $("#event1").html(`<b>${data[i].events.eventName}</b>`)
                                                        $("#time1").html(`<b>${data[i].events.eventDate} - ${data[i].events.targetReminder} | ${data[i].events.targetAmPM} </b>`)
                                                        $("#comment1").html(`<b>${data[i].events.caption}</b>`)
                                                        $("#location1").html(`<b>${data[i].events.location}</b>`)
                                                    }
                                                    })
                                                    .fail(function(xhr, status, error) {
                                                        console.log(error);
                                                    })
                                                    .always(function(data){
                                                    });

                                                    })





                                            </script>
                                            <div class="event-time">
                                                <time id="time1"  datetime="2004-07-24T18:18">9:00am</time>
                                                <div class="more"><svg class="olymp-three-dots-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use></svg>
                                                    <ul class="more-dropdown">
                                                        <li>
                                                            <a href="#">Mark as Completed</a>
                                                        </li>
                                                        <li>
                                                            <a href="#">Delete Event</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <h5 class="mb-0 title">
                                                <a href="#" data-toggle="collapse" data-target="#collapseOne-1" aria-expanded="true" aria-controls="collapseOne" id = "event1">
                                                    Breakfast at the Agency
                                                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                                                    <span class="event-status-icon"  data-toggle="modal" data-target="#public-event">
                                                                                <svg class="olymp-calendar-icon" data-toggle="tooltip" data-placement="top"   data-original-title="UNCOMPLETED"><use xlink:href="svg-icons/sprites/icons.svg#olymp-calendar-icon"></use></svg>
                                                                            </span>
                                                </a>
                                            </h5>
                                        </div>

                                        <div id="#collapseOne-1" class="collapse show" aria-labelledby="headingOne" data-parent="#headingOne-1">
                                            <div class="card-body" id ="comment1">
                                                Hi Guys! I propose to go a litle earlier at the agency to have breakfast and talk a little more about the new design project we have been working on. Cheers!
                                            </div>
                                            <div class="place inline-items">
                                                <svg class="olymp-add-a-place-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-add-a-place-icon"></use></svg>
                                                <span id ="location1">Daydreamz Agency</span>
                                            </div>
                                        </div>
                                    </div>

Any idea how to multiply that box based on data found with the script mentioned above ?

Hope I mentioned everything :-D ?

Best Regards,

node.js html ajax javascript
2 Answers

Every time your loop works, $("#event1").html(....), $("#-----").html(....) will be replaced with your new values. So why don't you rather create a variable name html outside a loop and every div section or html tags that needs to be rendered in DOM, inside the loop and append after the div you want to render. Like mentioned on above answer, 

var html="";
       for(let i =0; i< data.length;i++){
                html += `<div class="card-header"> ${data[i].event.eventName} </div>` +
                   `<div class=" -----">  $${data[i].event.eventDate} ` +
                    ------------------and so on---------------------------;
       }
         $("#NAME OF ID BEHIND YOU WANT TO SHOW YOUR NEW DIV").append(html);

Hope it will work :)

user_105949040

I believe you should just create the whole HTML in javascript then append that HTML to DOM. for example.

let html = "";
for(let i =0; i< data.length;i++) {
    html += "<p>"+ data[i].events.eventName + "</p>";
    html += "<p>"+ data[i].events.eventDate + "</p>";
    }
$("#ParentDivIDWhereToAppendThisContent").html(html);

The above code is just an example of how you can do it. You need to customize it to suit your needs.

user_114846770
Related