How to set JavaScript object's array in elements attribute?

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?

ggorlen · Accepted Answer · 2018-10-04 05:18:49Z

2

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>

edited Oct 4, 2018 at 5:18

answered Oct 4, 2018 at 4:38

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kiran Shahi Over a year ago

Thanks mate, this is what I was looking for.

gaperton Over a year ago

Except that "undefined" is not a valid JSON value, and it can't be easily parsed back from this JSON. "null" is. But yes, JSON.stringify is a way to go.

ggorlen Over a year ago

Yes, I should have emphasized that more. This may be an XY problem.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 4, 2018 at 4:54

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

2 Comments

Kiran Shahi Over a year ago

can you recommend me best data structure which can be stored as attribute in element.

zer00ne Over a year ago

That object isn't useful in a tag. If you handle it as it is, you can save yourself a few steps: 1.find the tag in DOM, 2. Access the data from tag, 3.parse the data so it's an object again. 4. Do you know if that array was needed anywhere else while it sat in DOM Purgatory?

Collectives™ on Stack Overflow

How to set JavaScript object's array in elements attribute?

2 Answers 2

3 Comments

Demo

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Demo

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related