JSON.stringify an Array of HTML Elements/Strings

Question

How can we convert this Javascript Array [li.one, li.one, li.one, li.two, li.two, li.two] into a JSON array using JSON.stringify?

Using the following Javascript:

    var stringsToStringify = $('.one, .two'),
            stringArray = []

    $.each(stringsToStringify, function (i, v) {
        stringArray[i] = v
    })

    console.log(stringArray)
    var jsonString = JSON.stringify(stringArray)
    console.log(jsonString)
    console.log(JSON.parse(jsonString))

Returns:

 [li.one, li.one, li.one, li.two, li.two, li.two]

[{"jQuery110203514890133216494":1},{"jQuery110203514890133216494":2},{"jQuery110203514890133216494":3},{"jQuery110203514890133216494":4},{"jQuery110203514890133216494":5},{"jQuery110203514890133216494":6}]

[Object { jQuery110203514890133216494=1}, Object { jQuery110203514890133216494=2}, Object { jQuery110203514890133216494=3}, Object { jQuery110203514890133216494=4}, Object { jQuery110203514890133216494=5}, Object { jQuery110203514890133216494=6}]

If we change the stringArray from [] to {} the following is returned:

 [li.one, li.one, li.one, li.two, li.two, li.two]

[{"jQuery110207305097851789301":1},{"jQuery110207305097851789301":2},{"jQuery110207305097851789301":3},{"jQuery110207305097851789301":4},{"jQuery110207305097851789301":5},{"jQuery110207305097851789301":6}]

[Object { jQuery110207305097851789301=1}, Object { jQuery110207305097851789301=2}, Object { jQuery110207305097851789301=3}, Object { jQuery110207305097851789301=4}, Object { jQuery110207305097851789301=5}, Object { jQuery110207305097851789301=6}]

The desired result is to have [li.one, li.one, li.one, li.two, li.two, li.two] "stringified" into a JSON Array.

This looks like a circular reference. What is the best way to supply the array of html elements to JSON.stringify?

Fiddle

What do you expect it to show? The plain HTML text?

ced-b
– ced-b

2014-08-20 23:42:54 +00:00
Commented Aug 20, 2014 at 23:42 — ced-b
– ced-b, Commented Aug 20, 2014 at 23:42
$('.one, .two') returns an array of jQuery objects.

vch
– vch

2014-08-20 23:43:18 +00:00
Commented Aug 20, 2014 at 23:43 — vch
– vch, Commented Aug 20, 2014 at 23:43
Yes, the plain HTML text JSON.stringify'd

id.ot
– id.ot

2014-08-20 23:44:38 +00:00
Commented Aug 20, 2014 at 23:44 — id.ot
– id.ot, Commented Aug 20, 2014 at 23:44

nnnnnn · Accepted Answer · 2014-08-21 00:04:43Z

$('.one, .two') returns a jQuery object containing references to whichever DOM elements have those two classes, it doesn't return an array of strings. So within your $.each(), the v parameter is not a string, it is a DOM element. If you want the HTML text (or just the text) of that element use $(v).html() or $(v).text():

var stringArray = [];
$('.one, .two').each(function(i, v) {
  stringArray.push( $(v).html() );
});
var jsonString = JSON.stringify(stringArray);

Demo: http://jsfiddle.net/stL1hz9t/

Note that I've used $('.one, .two').each() rather than the generic iterator $.each() method, because you want to loop over the items in a jQuery object. ($.each() will work, but it adds just that slight bit of extra complexity to your code.) You don't need your stringsToStringify variable (which as I mentioned above doesn't actually contain strings).

Or you can use the .map() method to simplify the code somewhat:

var stringArray = $('.one, .two').map(function (i, v) {
                    return $(v).html();
                  }).get();
var jsonString = JSON.stringify(stringArray);

Demo: http://jsfiddle.net/stL1hz9t/1/

ced-b · Accepted Answer · 2014-08-21 00:02:37Z

1

The array you created only returns jQuery object that reference the original DOM. To output the DOM element do the following:

$.each(stringsToStringify, function (i, v) {
    stringArray[i] = $("<p>").append($(v).clone()).html();
})

Note this whole $("<p>").append($(v).clone()).html() construction creates a clone of the original element, then appends the clone to a new parent and then gets the HTML from that. If you simply call .html() you will only get the content of the <li> tag, not the tag itself.

See fiddle here: http://jsfiddle.net/f0xchck6/

answered Aug 21, 2014 at 0:02

ced-b

4,0371 gold badge31 silver badges40 bronze badges

Collectives™ on Stack Overflow

JSON.stringify an Array of HTML Elements/Strings

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related