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 Aug 20 '14 at 23:42 — ced-b, Aug 20 '14 at 23:42
`$('.one, .two')` returns an array of jQuery objects. – vch Aug 20 '14 at 23:43 — vch, Aug 20 '14 at 23:43
Yes, the plain HTML text `JSON.stringify`'d – id.ot Aug 20 '14 at 23:44 — id.ot, Aug 20 '14 at 23:44

nnnnnn · Accepted Answer · 2014-08-21T00:04:43.623

$('.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/

score 1 · Answer 2 · answered Aug 21 '14 at 00:02

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/

JSON.stringify an Array of HTML Elements/Strings

2 Answers2

Linked