Как установить массив объекта JavaScript в атрибуте elements?

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 (), а затем использовать .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>

Answer 2

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>

Подумайте о замене undefined на 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);

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