current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

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

share|improve this question
    
What do you expect it to show? The plain HTML text? – ced-b Aug 20 '14 at 23:42
    
$('.one, .two') returns an array of jQuery objects. – vch Aug 20 '14 at 23:43
    
Yes, the plain HTML text JSON.stringify'd – id.ot Aug 20 '14 at 23:44
up vote 3 down vote accepted

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

share|improve this answer
up vote 1 down vote

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/

share|improve this answer
    
Dirty, but works beautifully. – id.ot Aug 21 '14 at 17:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.