代码之家 › 专栏 › 技术社区 › Kiran Shahi Jonny

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

object arrays javascript

Kiran Shahi Jonny · 技术社区 · 6 年前

我有一个对象数组,我想把它保存为元素中属性的值。我编写了以下代码:

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>

作为输出。我怎样才能做到这一点?

2 回复 | 直到 6 年前

ggorlen Hoàng Huy Khánh 6 年前

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字符串。以下是如何恢复这样一个结构:

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);

<此处为临时分区

Community kavare 4 年前

首先,如果这些数据在其他地方使用,我建议不要这样做,因为有更好的数据结构(比如对象数组)。话虽如此,属性始终是一个字符串,因此需要使用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>