Alexander Dixon Alexander Dixon - 5 months ago 13
jQuery Question

JSON style returns object object

From this StackOverflow answer I discovered the power of JavaScript Object Notation (JSON). In trying to fool around with it, so as to get a better grasp of its utility I tried applying a few additional attributes to the element. My question is how can I get JSON to parse a nested node as a string, instead of an object object? As a follow-up to that question, what is the correct syntax to nest CSS styles within JSON declarations?

The following does work:

'style': "width: 200px; color: #ACE"


This does not work (returns object object) but I would like it to work (is there some syntax that could achieve this?).

'style': [{
'width': '200px'
}]




//http://stackoverflow.com/a/37887133/5076162

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry <grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.',


// creating a <div> element with the data string
// as its innerHTML:
elem = $('<div />', {
'html': data,
'title': "myClass",
'style': "width: 200px; color: #ACE",
//'style': [{
// 'width': '200px'
//}]
}),

// using find() to retrieve the <grab> elements from
// within the newly-created <div>, and using map()
array = elem.find('grab').map(function() {
// ...to return the trimmed text of each
// found element:
return this.textContent.trim();

// converting the map to an Array:
}).get();

// appending the joined array (joining the array together
// with a comma-white-space sequence) to the <body>:
$('body').append(array.join(', '));
// => First Item, Second Item, Third Item
elem.appendTo($('body'));
console.log(JSON.stringify($('div').attr('style')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>




Answer

The style can only handle string non-string value it will apply toString(). You need to use css in jQuery, which can handle object also.

As per jQuery documentation here :

Important: If the second argument is passed, the HTML string in the first argument must represent a simple element with no attributes. As of jQuery 1.4, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset.

'css':{ 'width': '200px' }

//http://stackoverflow.com/a/37887133/5076162

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry <grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.',


  // creating a <div> element with the data string
  // as its innerHTML:
  elem = $('<div />', {
    'html': data,
    'title': "myClass",
    'css': {
      'width': '200px',
      'color':'#ACE'
    }
  }),

  // using find() to retrieve the <grab> elements from
  // within the newly-created <div>, and using map()
  array = elem.find('grab').map(function() {
    // ...to return the trimmed text of each
    // found element:
    return this.textContent.trim();

    // converting the map to an Array:
  }).get();

// appending the joined array (joining the array together
// with a comma-white-space sequence) to the <body>:    
$('body').append(array.join(', '));
// => First Item, Second Item, Third Item
elem.appendTo($('body'));
console.log(JSON.stringify($('div').attr('style')));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>