JSON style returns object object

Question

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'
}]

//https://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>

You seem to confuse JavaScript objects with JSON (understandably because of the name). What you are passing as second argument to $ is not JSON, it's an object (runtime) / object literal (source code). JSON is language-independent textual data format. — Felix Kling
– Felix Kling, Commented Jun 20, 2016 at 15:18
Hi Felix, I'm reading, benalman.com/news/2010/03/theres-no-such-thing-as-a-json now so your comment might make more sense soon after I finish it. Thanks. — Alexander Dixon
– Alexander Dixon, Commented Jun 20, 2016 at 15:20

Pranav C Balan · Accepted Answer · 2016-06-20 15:25:39Z

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>

Ben Rhys-Lewis · Accepted Answer · 2016-06-22 14:39:03Z

1

So close! It is:

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

edited Jun 22, 2016 at 14:39

answered Jun 20, 2016 at 15:18

Ben Rhys-Lewis

3,2768 gold badges36 silver badges45 bronze badges

1 Comment

Alexander Dixon Over a year ago

Hi Ben this is not correct... It is the same issue that I outlined. It returns [object object]. Does this work in non-jQuery JavaScript? Please provide a fiddle example (so that I can grasp the concept).

Collectives™ on Stack Overflow

JSON style returns object object

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related