在插件中处理多个javascript对象

我创建了一个简单的javascript插件，它允许我从特定的html元素收集数据。一个页面可以有x个元素（通常最多20个），每个元素都有自己的设置。我的问题是返回的对象不是有效的JSON格式，因为我得到了错误“多个JSON根元素”

我认为原因在于我在插件中使用的每个函数，它为每个对象创建一个新的对象，我已经尝试解决这个问题；结果很糟糕

非常感谢您的帮助，提前谢谢

示例插件

(function($) {

$.fn.collect_data = function() {


    this.each(function() {

        var id = "#" + ($(this).attr("id"));

        // Get numerical value of id
        var get_package_id = function() {
            var package_id = id.replace(/[^0-9]/g, '');
            return package_id;
        }       

        // Packages is the top level container
        var get_packages = function() {
            var packages = {};

            packages = ({[get_package_id()]: {}});
            return packages;
        }


        // Demo information for each invidual package
        var get_package_info = function() {
            var info = {};

            $(id).each(function() {

                info = ({
                    value: 'Some value', 
                    another_value: 'Another value'
                });
            });

            return info;
        }

        // Demo information for each invidual package
        var get_more_info = function() {
            var more_info = {};

            $(id).each(function() {

                more_info = ({
                    value_more_info: 'Some value', 
                    another_value_more_info: 'Another value'
                });
            });

            return more_info;
        }           

        // Combine the demo information
        var result = function() {

            var packages = get_packages();
            var info = get_package_info();
            var more_info = get_more_info();

            packages[get_package_id()].info = info;
            packages[get_package_id()].more_info = more_info;

            return packages;
        }

        $("#show-data").append(JSON.stringify(result(), null, 2));

    });
    return this; 
}

}(jQuery));     

无效结果

                {
  "33": {
    "info": {
      "value": "Some value",
      "another_value": "Another value"
    },
    "more_info": {
      "value_more_info": "Some value",
      "another_value_more_info": "Another value"
    }
  }
}{
  "74": {
    "info": {
      "value": "Some value",
      "another_value": "Another value"
    },
    "more_info": {
      "value_more_info": "Some value",
      "another_value_more_info": "Another value"
    }
  }
}{
  "99": {
    "info": {
      "value": "Some value",
      "another_value": "Another value"
    },
    "more_info": {
      "value_more_info": "Some value",
      "another_value_more_info": "Another value"
    }
  }
}{
  "124": {
    "info": {
      "value": "Some value",
      "another_value": "Another value"
    },
    "more_info": {
      "value_more_info": "Some value",
      "another_value_more_info": "Another value"
    }
  }
}{
  "124": {
    "info": {
      "value": "Some value",
      "another_value": "Another value"
    },
    "more_info": {
      "value_more_info": "Some value",
      "another_value_more_info": "Another value"
    }
  }
}

所有数据可能都应该在顶级{}容器中，而不是在它们自己的{}容器中添加每个对象

---

提前感谢所有帮助

谈论完全过度设计的代码。那些只调用一次的函数有什么意义？为什么要制作一个不能重复使用的插件

让我们将您的代码压缩为它的实际功能：

var data = $("foo").map(function () {
    return {
        package_id: "#" + this.id.replace(/[^0-9]/g, ''),
        info: {
            value: 'Some value', 
            another_value: 'Another value'
        },
        more_info: {
            value_more_info: 'Some value', 
            another_value_more_info: 'Another value'
        }
    };
}).toArray();

$("#show-data").text(JSON.stringify(data, null, 2));

---

旁注：

不要使用这样的数据结构：

{
   "uniqueID1": {"some": "data"},
   "uniqueID2": {"some": "data"},
   "uniqueID3": {"some": "data"}
}

这是将对象误用为数组

在这种情况下，您真正想要创建的是一个数组。这将使有关各方的生活更加轻松

[
   {"id": "uniqueID1", "some": "data"},
   {"id": "uniqueID2", "some": "data"},
   {"id": "uniqueID3", "some": "data"}
]

---

嘿，Tomalak，插件是为了学习，因为我想学习理解它们是什么以及如何使用它们。另外，我的想法是，我可以在其他页面上使用该插件，使其更加通用。不过，您的建议非常好，非常感谢。我会看看它如何适应这种特殊的需要。谢谢你给我的好建议：）你也可以在我的例子中重复使用这个函数。只需从

.map（）

中提取它并给它命名即可。对于插件来说，您的情况不是一个好的用例。插件应该以某种方式操纵DOM，否则它们毫无意义。@Griphon您的主要错误是试图通过字符串连接构建JSON（将文本附加到HTML元素也是一样）。不要那样做。构建数据结构（对象、数组、对象数组等等）。将其转换为JSON是最后一步，仅在通过网络发送或保存之前直接完成。JSON应该被认为是不可变的。不要附加到它，不要在其中搜索和替换，它仅用于存储或传输。你想要做的任何更改都需要解析JSON，更改数据结构，然后将更改后的数据结构重新转换为JSON。这是非常好的信息，我不知道。这对将来学习更好的练习有很大帮助。谢谢你的帮助，因为它解决了问题。我会将此帖子标记为已回答：）