如何在elements属性中设置JavaScript对象的数组？

Question

我有一个对象数组，我想将其保存为元素中的属性值。我编写以下代码：

var objArr = [
  { 
    class: "level-0", 
    style: undefined 
  },
  { 
    class: "level-1", 
    style: undefined 
  },
  { 
    class: "level-2", 
    style: undefined 
  },
  { 
    class: "level-3", 
    style: undefined 
  }
];

$(".temp-div").attr('div-properties', objArr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="temp-div">
Temp div here
</div>

生成

<div class="temp-div" div-properties="[object Object],[object Object],[object Object],[object Object]">
Temp div here
</div>

我正在尝试

<div class="temp-div" div-properties="[{class: "level-0",style: undefined},{class: "level-1",style: undefined},{class: "level-2",style: undefined},{class: "level-3",style: undefined}]">
Temp div here
</div>

作为输出。我该如何实现？

Answer 1

JSON.stringify可能就是您想要的（您当前无意中使用了.toString()）。 JSON.stringify将删除您的undefined对，因为它们不是有效的JSON值，因此需要进行一些人工操作来保留它们。

var objArr = [
  { 
    class: "level-0", 
    style: undefined 
  },
  { 
    class: "level-1", 
    style: undefined 
  },
  { 
    class: "level-2", 
    style: undefined 
  },
  { 
    class: "level-3", 
    style: undefined 
  }
];

const stringified = JSON.stringify(
  objArr, (k, v) => v === undefined ? "undefined" : v
).replace(/"undefined"/g, "undefined");

$(".temp-div").attr('div-properties', stringified);

console.log(stringified); // testing 1-2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="temp-div">
Temp div here
</div>

请考虑使用null替换undefined以产生有效的可解析的JSON字符串。这是恢复这种结构的方法：

var objArr = [
  { 
    class: "level-0", 
    style: undefined 
  },
  { 
    class: "level-1", 
    style: undefined 
  },
  { 
    class: "level-2", 
    style: undefined 
  },
  { 
    class: "level-3", 
    style: undefined 
  }
];

const stringified = JSON.stringify(
  objArr, (k, v) => v === undefined ? null : v
);

$(".temp-div").attr('div-properties', stringified);

/* ... later on in your code ... */
const parsed = JSON.parse($('.temp-div').attr('div-properties')); 

parsed.forEach(e => 
  Object.keys(e).forEach(f => e[f] = e[f] === null ? undefined : e[f])
);

console.log(parsed);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="temp-div">
Temp div here
</div>

Answer 2

首先，如果在其他地方使用此数据，我会建议不要这样做，因为它的数据结构要好得多（例如对象数组）。话虽如此，属性始终是一个字符串，因此您需要使用JSON.stringify（）将数据转换为字符串，然后使用.data()创建一个data-*属性。

演示

var objArr = [{
  class: "level-0",
  style: void 0
}, {
  class: "level-1",
  style: void 0
}, {
  class: "level-2",
  style: void 0
}, {
  class: "level-3",
  style: void 0
}];

$('.temp-div').data('prop', JSON.stringify(objArr));

console.log($('.temp-div').data('prop'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="temp-div">
  Temp div here
</div>