プラグイン内で複数のjavascriptオブジェクトを扱う

Question

私は特定のhtml要素からデータを収集するための簡単なjavascriptプラグインを作成しました。ページにはx個の要素（通常最大20個）があり、各要素には独自の設定があります。私の問題は、返されたオブジェクトが有効なJSON形式ではないということです。なぜなら、 "Multiple JSON root elements"というエラーが発生しているからです。

私はそれぞれのオブジェクトのための新しいオブジェクトを作成するプラグインの中で私が使用しているそれぞれの関数のためと私はこれを解決しようとしている理由だと思う。悪い結果を伴います。

すべてのご協力をいただき、ありがとうございます。

サンプル・プラグイン

(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" 
    } 
    } 
} 

すべてのデータは、おそらくトップレベル{}容器の代わりに、各オブジェクトを{}自分の内に追加される内部でなければなりません。

ご協力いただきありがとうございます。

Answer 1

完全に工学的なコードについてお話します。一度しか呼び出されていないこれらすべての機能のポイントは何ですか？なぜ何のためにも再利用できないプラグインを作るのですか？

のは、それが実際に何をするかにあなたのコードを収縮してみましょう：

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"} 
]