JSON.stringify一个HTML元素/字符串数组 [英] JSON.stringify an Array of HTML Elements/Strings

问题描述

我们如何将这个Javascript Array [li.one，li.one，li.one，li.two，li.two，li.two] 转换为使用JSON.stringify的JSON数组？

使用以下Javascript：

  var stringsToStringify = $（' .one，.two'），
 stringArray = [] 
 
 $ .each（stringsToStringify，function（i，v）{
 stringArray [i] = v $ b $ （jsonString）
 console.log（JSON）。 parse（jsonString））
  

返回：

  [li.one，li.one，li.one，li.two，li.two，li.two] 
 
 [{jQuery110203514890133216494：1 {jQuery110203514890133216494：2}，{jQuery110203514890133216494：3} [对象{jQuery110203514890133216494 = 1}，{对象= jQuery110203514890133216494 2}，{对象= jQuery110203514890133216494 3}，{对象= jQuery110203514890133216494 4}，{对象jQuery110203514890133216494 = 5}，对象{jQuery110203514890133216494 = 6}] 
  

如果我们改变 stringArray 从 [] 到 {} >返回以下内容： p>

  [li.one，li.one，li.one，li.two，li.two，li.two] 
 
 [{jQuery110207305097851789301：1}，{jQuery110207305097851789301：2}，{jQuery110207305097851789301：3}，{jQuery110207305097851789301：4}，{jQuery110207305097851789301：5}，{jQuery110207305097851789301 ：6}] 
 
 [对象{jQuery110207305097851789301 = 1}，对象{jQuery110207305097851789301 = 2}，对象{jQuery110207305097851789301 = 3}，对象{jQuery110207305097851789301 = 4}，对象{jQuery110207305097851789301 = 5}，对象{ jQuery110207305097851789301 = 6}] 
  

期望的结果是有 [li.one ，li.one，li.one，li.two，li.two，li.two] 字符串化为JSON数组。

这看起来像一个循环引用。什么是最好的方式来提供元素的数组 JSON.stringify ？

小提琴

解决方案

$（'。one，.two'）返回一个jQuery对象，其中包含对具有这两个类的DOM元素的引用，它不返回字符串数组。因此，在 $。each（）中， v 参数不是一个字符串，而是一个DOM元素。如果您希望该元素的HTML文本（或仅文本）使用 $（v）.html（）或 $（v）.text （）：

  var stringArray = []; 
 $（'。one，.two'）。each（function（i，v）{
 stringArray.push（$（v）.html（））; 
}）; 
 var jsonString = JSON.stringify（stringArray）; 
  

演示： http://jsfiddle.net/stL1hz9t/

请注意，我使用 $（'。one，.two'）。each（） 而不是泛型迭代器 $。each（）方法，因为你想要遍历jQuery对象中的项目。 （ $。each（）可以工作，但它会增加代码的复杂度）。你不需要你的 stringsToStringify 变量（正如我上面提到的，它实际上并不包含字符串）。

或者你可以使用 .map（）方法可以简化代码：

  var stringArray = $（'。one，.two'）。map（function（i，v）{
 return $（v）。 html（）; 
}）。get（）; 
 var jsonString = JSON.stringify（stringArray）; 
  

演示： http://jsfiddle.net/stL1hz9t/1/

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

解决方案

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

这篇关于JSON.stringify一个HTML元素/字符串数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！