Jquery, как разбить данные массива на отдельные элементы?

Question

[Aldadis]

Добрый день!
Имеется некая таблица заказов, у каждого заказа есть метки ожидается товар, перезвонить и т.п. Эти метки я получаю из json файла в массив row.OrderLabel и ретурном возвращаю метки текущего элемента. У каких-то заказов 3 метки, у каких-то 1 метка

Код

template: function(row) {
                    row.OrderLabel = ["ожидается товар", "перезвонить", "тестовая метка"]
                    var labelName = row.OrderLabel;
                    return '<div>' + labelName + '</div>';
                },

На выходе я получаю

Заказ 356
<div>ожидается товар, перезвонить, тестовая метка</div>

Заказ 355
<div>ожидается товар</div>

Заказ 354
<div>перезвонить, тестовая метка</div>

Как сделать так чтобы на выходе был такой вид

Заказ 356
<div><p>ожидается товар</p>, <p>перезвонить</p>, <p>тестовая метка</p></div>

Заказ 355
<div><p>ожидается товар</p></div>

Заказ 354
<div><p>перезвонить</p>, <p>тестовая метка</p></div>

Answer 1

[Вадим]

Так Вы же со строками работаете.
Так и напишите.

row.OrderLabel = ["<p>ожидается товар</p>", "<p>перезвонить</p>", "<p>тестовая метка</p>"]

Comments

[Aldadis]

Я не могу ) я эти данные получаю из json (они динамические), там они в виде

"OrderLabel":["ожидается товар","перезвонить","тестовая метка"]

Конечно можно было бы выгрузить в json сразу со всеми тегами, но хотелось как-то по элегантней это сделать без лишнего мусора в json :)

[Вадим]

Aldadis, Ну сделайте тогда map

["ожидается товар","перезвонить","тестовая метка"].map(function(item){return '<p>' + item + '</p>'})

[Вадим]

Aldadis, получилось?

[Aldadis]

Вадим,
Не совсем, сделал так

var labelName = row.OrderLabel.map(function(item){return '<p>' + item + '</p>'});

В консоли получаю для первого заказа нормально, потом map is not a function


Оригинальный код выглядит сейчас так

{
    field: 'OrderName',
    title: 'Номер заказа',
    autoHide: false,
    width: 250,
    template: function(row) {
        var labelName = row.OrderLabel.map(function(item){return '<p>' + item + '</p>'});
        var labelColor = row.LabelColor;
        return '<div class="d-flex align-items-center">\
                    <div class="ml-0">\
                        <div class="text-dark-75 font-weight-bold line-height-lg">' + row.OrderName + '</div>\
                        \<span class="label label-lg font-size-sm label-dot mr-2" style="background-color: #' + labelColor + ';"></span><span class="font-size-xs text-dark-50">' + labelName + '</span></div>\
                </div>';
    },
},

[Вадим]

Aldadis, значит во втором случае там не массив?

[Aldadis]

Вадим, блииин, ппц. У меня там у одного заказа нет метки, получаю null и все ломается. Поставил метку, все работает.
Спасибо за помощь! Буду разбираться с null теперь :)

[Вадим]

Aldadis, можете добавить проверку Array.isArray(row.OrderLabel)

[Aldadis]

Вадим,

Uncaught TypeError: Array.isArray(...).map is not a function

[Вадим]

Aldadis,

{
    field: 'OrderName',
    title: 'Номер заказа',
    autoHide: false,
    width: 250,
    template: function(row) {
       if(Array.isArray(row.OrderLabel)) {
         var labelName = row.OrderLabel.map(function(item){return '<p>' + item + '</p>'});
        var labelColor = row.LabelColor;
        return '<div class="d-flex align-items-center">\
                    <div class="ml-0">\
                        <div class="text-dark-75 font-weight-bold line-height-lg">' + row.OrderName + '</div>\
                        \<span class="label label-lg font-size-sm label-dot mr-2" style="background-color: #' + labelColor + ';"></span><span class="font-size-xs text-dark-50">' + labelName + '</span></div>\
                </div>';
      }
      return '<div></div>'
        
    },
},

[Aldadis]

Вадим, шикарно, спасибо!!! Все работает, чуть подправил и отлично

{
                field: 'OrderName',
                title: 'Номер заказа',
                autoHide: false,
                width: 250,
                template: function(row) {
                    if(Array.isArray(row.OrderLabel)) {
                        var labelName = row.OrderLabel.map(function(item){return '<p>' + item + '</p>'});
                    } else {
                        var labelName = 'Нет метки';
                    };
                        var labelColor = row.LabelColor;
                        return '<div class="d-flex align-items-center">\
                    <div class="ml-0">\
                        <div class="text-dark-75 font-weight-bold line-height-lg">' + row.OrderName + '</div>\
                        \<span class="label label-lg font-size-sm label-dot mr-2" style="background-color: #' + labelColor + ';"></span><span class="font-size-xs text-dark-50">' + labelName + '</span></div>\
                </div>';
                    return '<div></div>'

                },
            },