如何在元素属性中设置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替换未定义的JSON字符串，以生成有效的、可解析的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>

​