将字符串数组存储到数据属性中

时间:2018-07-23 10:49:01

标签: javascript jquery json

为什么每次都不能帮助您投反对票。 至少说出什么问题。

我尝试了一些建议JSON.stringify(),但在检索数据属性时,我只得到第一个单词“ 2003/09/01”。

谢谢。

我有一个循环,将字符串放入数组中。

var row = date + " - " + res + " - " + v.CSERV + " / " + v.CHAMB + " / " + v.LIT + " (" + v.TYPMVT + ")";
dataDetail.push(row);

数组的输出

  

[“ 2003/09/01-07:45-02/07/01(入场)”,“ 2003/09/03-15:00   -01/46/01(传输)”,“ 2003/09/05-10:00-01/45/01(传输)”,“ 2003/09/08-09:14-01/45/01(传输) )“,   “ 2003/09/09-11:00-01/45/01(Sortie)”]

数据清单如下:

$('#Historique .items').append(`
                            <div class='item'>
                                <div class='content detail' data-detail=` + JSON.stringify(dataDetail) + `>                                       
                                    <p>` + "du " + dateD + " (" + value.UNI + ") au " + dateS + " (" + value.UNI + ") Nr° Séjour : " + value.NUM + " (" + value.TYP + ")" + `</p>
                                </div>
                            </div>`);   

1 个答案:

答案 0 :(得分:0)

在html属性中使用JSON是不安全的。它肯定包含qoutes。它还可能包含<>,这将完全破坏您的标记。

相反,您可以将jquery.data用作外部数据存储。

const item = $(... mark element with data-detail...) // create jquery object
item.find('[data-detail]').data('detail', data) // find marked element and put data to its expando object (avoiding html to dom phase)

下面的工作演示

$(function() {
  const data = ["2003/09/01 - 07:45 - 02 / 07 / 01 (Admission)", "2003/09/03 - 15:00 - 01 / 46 / 01 (Transfert)", "2003/09/05 - 10:00 - 01 / 45 / 01 (Transfert)", "2003/09/08 - 09:14 - 01 / 45 / 01 (Transfert)", "2003/09/09 - 11:00 - 01 / 45 / 01 (Sortie)"]

  const target = $('#target');
  
  target.on('click', '.detail', function() {
    console.log($(this).data('detail'))
  })
  
  const item = $(`<div class='item'>
                                <div class='content detail' data-detail>                                 
                                    <p>Whatever you do here. Click here to get data-detail</p>
                                </div>
                            </div>`)
  item.find('[data-detail]').data('detail', data)                           
                            

  target.append(item)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target" />