javascript - 如何在 javascript 中将 HTML 列表值作为数组推送到单个 JSON 键

Question

我正在尝试获取 HTML 列表的文本值，然后将它们推送到 JSON 对象中的单个键值。我希望 JSON 内容看起来像 {"players": ["James","Emma","Vincent"]}。我当前的尝试如下。

// create array with empty player key
var infoArray = [{
    "players": ""
}];
// set the player key to a var
var mykey = 'players'; 

// for each player
$(".player").each(function () {
    infoArray[mykey].push({
      // add the player's name to the key
      $(this).text();
    });
});

//show the resulting json
$("#list").html(JSON.stringify(infoArray));

pre {
    word-wrap:break-word;
    padding:10px;
    margin:10px;
    background:#eee;
    line-height: 1.7
}

<ul>
  <li class="player">James</li>
  <li class="player">Emma</li>
  <li class="player">Vincent</li>
</ul>
<h3>JSON result</h3>
<pre id="list"></pre>

Answer 1

有几件事:

1) push() 函数中不需要 { }

infoArray[mykey].push({ // <-- here
    $(this).text();
});

2) 不要将player键的值初始化为空字符串""，而是使用空数组[]。

另请注意，infoArray 是一个 JSON 数组，而不是 JSON 对象。

<小时/>

// create array with empty player key
var infoArray = [{
    "players": []
}];
// set the player key to a var
var mykey = 'players'; 

// for each player
$(".player").each(function () {
    var el = infoArray[0];
    el[mykey].push($(this).text());
});

//show the resulting json
$("#list").html(JSON.stringify(infoArray));

pre {
    word-wrap:break-word;
    padding:10px;
    margin:10px;
    background:#eee;
    line-height: 1.7
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="player">James</li>
  <li class="player">Emma</li>
  <li class="player">Vincent</li>
</ul>
<h3>JSON result</h3>
<pre id="list"></pre>