How to turn ajax response into layout?

Question

JavaScript

I get a response from Ajax in the form of an array.


Here I'm trying to turn it into a layout in a cycle.

success

success: function (resik) {
                    console.log(resik);
                    console.log(resik.length);
                    if (resik.length!==0)
                    {
                    for (var i = 0; i < resik.length; i++) {
                    	var resres = resik[i].time;

                            $(".panel").append('<div class="panel-heading">'+
                            '<h4 class="panel-title">'+
                           + '<a data-toggle="collapse" data-parent="#accordion-alt3" href="#collapse1-alt3">'+
                           + '<i class="fa fa-stack-exchange"></i>'+ v +
                            +'</a>'
                            +'</h4>'
                           + '</div>');

                    }
                    }
                    else
          {
                        $(".panel").append('<div class="panel-heading">'+
                            '<h4 class="panel-title">'+
                            + '<a data-toggle="collapse" data-parent="#accordion-alt3" href="#collapse1-alt3">'+
                            + '<i class="fa fa-stack-exchange"></i>'+ 'На данную дату талонов нет'+
                            +'</a>'
                            +'</h4>'
                            + '</div>');

          }
                },
                error:function () {
                    alert('Error');
                }

It adds blocks, though it adds each time, but I want it to delete those when it adds new ones.

But the main snag in krakozyabras is NaN

Where do their legs grow from?

Answer 1

try this option

success: function (resik) {
            var time_list = [];
            var time_html = [];
            if (Array.isArray(resik)){
                resik.forEach(function(res){
                    time_list.push(res.time);
                });
            }
            if (!time_list.length)
                time_list.push('На данную дату талонов нет');
            time_list.forEach(function (time) {
                time_html.push('<div class="panel-heading"><h4 class="panel-title">' +
                    '<a data-toggle="collapse" data-parent="#accordion-alt3" href="#collapse1-alt3">' +
                    '<i class="fa fa-stack-exchange"></i>${time}</a></h4></div>');
            });
            $(".panel").html(time_html.join('\n'));
        },
        error: function () {
            alert('Error');
        }

Answer 2

+ '<a data-toggle="collapse" data-parent="#accordion-alt3" href="#collapse1-alt3">'+
                            + '<i class="fa fa-stack-exchange"></i>'+ 'На данную дату талонов нет'+
                            +'</a>'

Here you have two pluses in a row (so NaN is displayed) - fix this.
Use html instead of ppend - then the content of the element will be overridden.