Question

55

JSON.stringify an Array of HTML Elements/Strings

rated 0 times [ 62] [ 7] / answers: 1 / hits: 6672 / 10 Years ago, wed, august 20, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cadendericki

Add To Favorites

Follow

Total Points: 482

Total Questions: 109

Total Answers: 103

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

answered 10 Years ago johnnyblaynes · Accepted Answer

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