MaterializeCSS Настройка чипов из базы данных

Question

Я застрял в этом. У меня есть несколько дат, поступающих из базы данных с помощью Ajax вызова, они находятся в виде строки, sperated труб, как это,

var dates = $('#pm_date').val(responseData.site_detail["PM_Date"]) 
// result > dates = "2016-03-01|2017-05-02|2016-06-13" 

количества дат может меняться и я не имею никакого контроля над этим.

Я хочу показать эти даты как чипы в материализации css. я расколоть даты в массиве, теперь я хочу, чтобы передать их в эту функцию

$('.chips-initial').material_chip({ 
    data: [{ 
     tag: 'Apple', 
    }, { 
     tag: 'Microsoft', 
    }, { 
     tag: 'Google', 
    }], 
    }); 

, если он был в PHP я мог сделать, как этот

$('.chips-initial').material_chip({ 
    data: [{ 

    <?php 

    for($i=0; $i<count($dates); $i++) { 
     echo "{ tag :" . $date[$i] .",},"; 
     } 

    ?> 
    }], 
    }); 

Как я могу это сделать в Java-скрипта или JQuery?

Answer 1

Существуют различные способы достижения того, что вам нужно. Я попытался сделать это с помощью es2105 с двумя примерами, а последний - старым. Надеюсь, поможет.

// Option 1 (es2015 way) 

let tags = []; 
const dates = ["2016-03-01" , "2017-05-02", "2016-06-13"]; 

tags = dates.reduce((coll, item) => { 
    coll.push({ 
    tag: item 
    }); 
    return coll; 
}, tags); 


// Option 2 (es2015 way) 

let tags2 = []; 

for(d of dates) { 
    tags2.push({tag: d}); 
} 

// Option 3 (the old way) 
var tags3 = []; 
var dates3 = ["2016-03-01" , "2017-05-02", "2016-06-13"]; 

for(i=0; i < dates3.length; i++) { 
    tags3.push({tag: dates3[i]}); 
} 

// result 3 

$('.chips-initial').material_chip({ 
    data: tags3 
}); 

Example code Jsbin