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

Question

I have an array of object and I want to save it as attribute's value in an element. I write following code:

 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> 

which generate

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

I am trying to get

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

as output. How can I achieve this?

Answer 1

JSON.stringify is probably what you're after (you're currently inadvertently using .toString() ). JSON.stringify will remove your undefined pairs because they aren't valid JSON values, so there's some footwork done to preserve them artificially.

 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> 

Consider replacing undefined with null to produce a valid, parseable JSON string. Here's how you might go about reviving such a structure:

 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

First off I would advise against this if this data is used elsewhere, there are far better data structures (like an Array of Objects). Having said that, an attribute is always a string, so you need to convert the data into a string with JSON.stringify() and then use .data() to create a data-* attribute.

Demo

 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>