Как превратить ответ аякса в вёрстку?

Question

[Евгений]

Приходит мне ответ от аякса в виде массива.


Тут пытаюсь превратить в цикле в вёрстку.

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');
                }

Блоки оно добавляет , правда каждый раз приплюсовывает, а хочу чтобы оно удаляло те, когда добавляло новые.

Но главная загвоздка в кракозябрах NaN

Откуда у них ноги растут?

Comments

[Сергей Сергей]

лишние плюсы убрать, вместо аппенд делать иннерХТМЛ.

[Nick Sdk]

Но главная загвоздка в кракозябрах NaN

NaN

[Nick Sdk]

'<i class="fa fa-stack-exchange"></i>'+ v +

где у вас определяется переменная v?

[Nick Sdk]

и да, лишние плюсы убрать следует.
т.к. у вас в некоторых местах написано + +
то js, видимо, считает, что вы хотите выполнить не конкатенацию, а инкремент
первое для строк, второе для чисел )

Answer 1

[Nick Sdk]

попробуйте такой вариант

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');
        }

Comments

[Цветочный Гений]

Прошу прощения , кол-во комментариев суточное закончилось. Создал ещё один аккаунт. Оно динамически добавляет от кол-ва элементов в массиве, Nan нет, но есть одна проблема. ${time} Оно прям так и выводит.
Даже условие

if (!time_list.length)
                time_list.push('На данную дату талонов нет');

Не срабатывает и всё равно ${time} выводит


(не обращайте внимание на time_c я просто поле в БД переименовал с time на time_c

[Nick Sdk]

dunakov1212,

${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>');

[Цветочный Гений]

Nicolas Serdyuk, Всё прекрасно работает, большое спасибо

[Nick Sdk]

dunakov1212, отлично) :)

[Цветочный Гений]

Nicolas Serdyuk, Не подскажите ещё такую вещь.

Там при формировании блока у текста есть href свой.
Мне нужно чтобы формировалась ссылка index.php?r=category/viewdoc&id={id} (средствами php ссылку сформировать не получится) , где {id} переменная из массива

[Nick Sdk]

dunakov1212, получится, но надо переписать код

[Nick Sdk]

dunakov1212,

success: function (resik) {
    var time_list = [];
    var time_html = [];
    if (Array.isArray(resik)) {
        resik.forEach(function (res) {
            time_list.push({'id': id, 'time': 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="index.php?r=category/viewdoc&id=' + time.id + '">' + // урл с id
            '<i class="fa fa-stack-exchange"></i>' + time.time + '</a>' + // время
            '</h4></div>'); 
    });
    $(".panel").html(time_html.join('\n'));
},

[Nick Sdk]

dunakov1212, ой, только надо подправить для варианта, если нет талонов :)

[Цветочный Гений]

Nicolas Serdyuk, Я ссылки подобного рода делал при помощи Yii2 хелпера.
Допустим вот похожая ссылка ,которую я хочу сформировать

<a href="<?= \yii\helpers\Url::to(['category/viewdoc', 'id' =>$item['id']])?>"><?=$item['name']?></a>

Но у меня всё происходит в сакссесе так что нужно формировать ссылки средствами javascript с динамическим get параметром

[Nick Sdk]

dunakov1212,

success: function (resik) {
    var time_list = [];
    var time_html = [];
    if (Array.isArray(resik)) {
        resik.forEach(function (res) {
            time_list.push({'id': res.id, 'time': res.time}); // в таком виде записываем нужное
        });
    }
    if (!time_list.length)
        time_list.push({'time': 'На данную дату талонов нет'});
    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="' + ((time.id) ? ('index.php?r=category/viewdoc&id=' + time.id) : '') + '">' + // урл с id
            '<i class="fa fa-stack-exchange"></i>' + time.time + '</a>' + // время
            '</h4></div>');
    });
    $(".panel").html(time_html.join('\n'));
},

[Цветочный Гений]

Nicolas Serdyuk, Cпасибо, вы боженька.

Answer 2

[Михаил Бобков]

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

Тут у вас идут два плюса подряд (поэтому выводится NaN) - исправьте это.

Вместо ppend используйте html - тогда содержимое элемента будет переопределяться.