jQuery AJAX .each() 计数项目答案

【问题标题】：jQuery AJAX .each() count itemsjQuery AJAX .each() 计数项目
【发布时间】：2017-12-22 06:50:42
【问题描述】：

我正在从 XML 数据库中提取数据。大致是这样的：

<record>
  <eventname></eventname>
  <company></company>
  <city></city>
  <state></state>
</record>

然后我用以下内容解析它：

success: function(xml){
$('record',xml).each(function() {
    var evname = $(this).find('eventname').text();
    var co = $(this).find('company').text();
    var city = $(this).find('city').text();
    var state = $(this).find('state').text();
    ...

获得变量后，我为各个状态运行 each()：

$(this).find('state').each(function(){

这样我可以返回每个状态的事件，而且效果很好。然而，我今年需要做的是提供每个州的事件计数。由于种种原因，最可靠的项目是“城市”。所以我尝试了：

var count = $(this).find('city').length;

但是当我在状态循环中用这个解析它时：

$('<div></div>').html('<p>Total: '+ count +'</p>').prependTo('.'+ state);

我得到每个城市的段落行和结果数“1”，所以：

总计：1 总计：1 总计：1

...

我认为这是因为 AJAX 循环遍历每条记录，并在找到它时只返回一个结果。每个州的计数（段落数）都是正确的。如果一个状态有 15 个事件，则前面有 15 个“Total: 1”。所以我的问题（我尝试了很多不同的解析方法）是如何对数字求和并得到如下结果：“总计：15”？

【问题讨论】：

您能否提供您的state 循环，以及在何处/何时调用它？
我的帖子里有。它在 $(document).ready 上调用，在 $('record',xml).each 之后调用。

标签： jquery ajax xml html

【解决方案1】：

这个怎么样

success: function (xml) {
    var count = 0;
    $('record', xml).each(function () {
        ...
        count++;
        ...

我注意到 find('city') 总是返回 1。因此，在每次迭代中将 count 增加 1 应该可以工作。

【讨论】：

不。 count++ 只是将其增加到 Total: 2, Total: 2, Total: 2... 仍然输入相同数量的城市，所以它没有将结果加倍，只是打印的数字。
让我们看看我是否理解正确。所以你想计算每个州的事件，你是通过计算每个州的不同城市来做到的？因为每个城市只能有 1 个事件？

【解决方案2】：

我们解决了！结果发现，当我需要专注于记录时，我看着一个兄弟姐妹走错了路。

我的同事写了一个函数：

var recordsList = [];
var statesObj = {};

function parser() {
    recordsList.forEach(function(record) {
        if( !statesObj[record.state] ) {
            // If state key doesn't exist, create it
            // Each state will have its own key for each indexing, along with a records list
            statesObj[record.state] = {
                records: [record],
                dot_on_map: false
            }
        }
        else {
            // If state key exists, Then just add to it.
            // The records list in the state key should exist during this iteration
            statesObj[record.state].records.push(record);
        }
    })

    //console.log("records:", recordsList);
    //console.log("states:", statesObj);
    render();
}

function render() {
    Object.keys(statesObj).forEach(function(key) {
        let state = key;
        let stateObj = statesObj[key]; ...

从那里，它只是：$('<div></div>').html('<p>Total: '+ stateObj.records.length +'</p>').prependTo('.'+ state);

【讨论】：