title: Error in JSON parsing Javascript loosing id field
body: <p>When I am parsing this string with JSON.parse(). I get the objects with some of them containing id = null. I don't find any of the object that have id = null. Is there really any issue?</p>
  
  <pre><code>                        console.log("TERRITORIES000: ");
                          console.log(territories);
                          territories = JSON.parse(territories);
                          console.log("TERRITORIES111: ");
                          console.log(territories);
  </code></pre>
  
  <p>And I see of the Territory with name "B.C Paul (B.Baria, Akhaura)" contains id = null. But It's id is not null in the json string. I am testing it in chrome browser. It weird.</p>
  
  <pre><code>[ {
    "name" : "MBKB, Sylhet (Metro, Biswanath, Kanaighat, Osmaninagar)",
    "area" : {
      "name" : "Sylhet",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 11
    },
    "id" : 36
  }, {
    "name" : "MBKB (Sunamgonj)",
    "area" : {
      "name" : "Sylhet",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 11
    },
    "id" : 37
  }, {
    "name" : "South Sylhet (Moulavi Bazar, Kulaura)",
    "area" : {
      "name" : "B.Baria",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 12
    },
    "id" : 38
  }, {
    "name" : "B.C Paul (B.Baria, Akhaura)",
    "area" : {
      "name" : "B.Baria",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 12
    },
    "id" : 39
  }, {
    "name" : "Sharif Store, (Habigonj)",
    "area" : {
      "name" : "B.Baria",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 12
    },
    "id" : 40
  }, {
    "name" : "JR Corporation, (Bhairab)",
    "area" : {
      "name" : "Narshingdi",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 13
    },
    "id" : 41
  }, {
    "name" : "JR Corporation, (Narsingdi)",
    "area" : {
      "name" : "Narshingdi",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 13
    },
    "id" : 42
  }, {
    "name" : "Islam Traders, (Kishorgonj- 1, Kishorgonj- 2)",
    "area" : {
      "name" : "Narshingdi",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 13
    },
    "id" : 43
  }, {
    "name" : "Noor  Son's (Mymensing, Fulpur, Bhaluka)",
    "area" : {
      "name" : "Mymensingh",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 14
    },
    "id" : 44
  }, {
    "name" : "Amin &amp; Co. (Sherpur, Jamalpur)",
    "area" : {
      "name" : "Mymensingh",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 14
    },
    "id" : 45
  }, {
    "name" : "Shashi Mohan Roy (Netrokona)",
    "area" : {
      "name" : "Mymensingh",
      "region" : {
        "name" : "Sylhet",
        "id" : 3
      },
      "id" : 14
    },
    "id" : 46
  } ]
  </code></pre>
  
  <p>This is the entire code</p>
  
  <pre><code>(function () {
      var Form = React.createClass({
  
          getDefaultProps: function () {
              return {
              };
          },
          getInitialState: function () {
              return {
                  region: this.emptyRegion(),
                  regions: []
              }
          },
          componentDidMount: function (e) {
              var $this = this;
              $.ajax({
                  url: '/search-regions',
                  method: 'get',
                  cache: false,
                  success: function (regions) {
                      regions = JSON.parse(regions);
                      $this.setState({regions: regions});
  
                      var region = regions.filter(function (region) {return region.id == $this.state.region.id})[0] || $this.emptyRegion();
                      region = JSON.parse(JSON.stringify(region));
                      region.areas = [];
                      region.area = $this.emptyArea();
                      $this.findRegion(region);
  
                  }.bind($this),
                  error: function (x) {
                      try {
                          alert(JSON.parse(x.responseText).message);
                      } catch (e) {
                          alert("Server Error: Please try again.");
                      }
                  }.bind($this),
              });
          },
          onRegionChange: function (e) {
              var region = JSON.parse(JSON.stringify(this.state.region));
              region.id = e.target.value;
              this.findRegion(region);
          },
          onAreaChange: function (e) {
              var region = JSON.parse(JSON.stringify(this.state.region));
              region.area.id = e.target.value
              this.findRegion(region);
          },
          onTerritoryChange: function (e) {
              var region = JSON.parse(JSON.stringify(this.state.region));
              region.area.territory.id = e.target.value;
              this.findRegion(region);
          },
          render: function () {
              console.log("RENDERING: ");
              console.log(this.state.region);
              var modalCounter = 1;
  
              var region_ops = this.state.regions.map(function (region) {
                                   return (&lt;option value={region.id} key={region.id}&gt;{region.name}&lt;/option&gt;);
                               });
  
              var area_ops = this.state.region.areas.map(function (area) {
                                   return (&lt;option value={area.id} key={area.id}&gt;{area.name}&lt;/option&gt;);
                               });
  
              var territory_ops = this.state.region.area.territories.map(function (territory) {
                                   return (&lt;option value={territory.id} key={territory.id}&gt;{territory.name}&lt;/option&gt;);
                               });
  
              return (
                  &lt;form&gt;
  
                      &lt;div className="row"&gt;
                          &lt;div className="col-md-2"&gt;
  
                              &lt;div className="form-group"&gt;
  
                                  &lt;select className="form-control"
                                  value={this.state.region.id}
                                  onChange={this.onRegionChange}
                                  name="region"&gt;
                                      &lt;option value=""&gt;Select Region&lt;/option&gt;
                                      {region_ops}
                                  &lt;/select&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                          &lt;div className="col-md-2"&gt;
  
                              &lt;div className="form-group"&gt;
  
                                  &lt;select className="form-control"
                                  value={this.state.region.area.id}
                                  onChange={this.onAreaChange}
                                  name="area"&gt;
                                      &lt;option value=""&gt;Select Area&lt;/option&gt;
                                      {area_ops}
                                  &lt;/select&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                          &lt;div className="col-md-2"&gt;
  
                              &lt;div className="form-group"&gt;
  
                                  &lt;select className="form-control"
                                  value={this.state.region.area.territory.id}
                                  onChange={this.onTerritoryChange}
                                  name="territory"&gt;
                                      &lt;option value=""&gt;Select Territory&lt;/option&gt;
                                      {territory_ops}
                                  &lt;/select&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                          &lt;div className="col-md-3"&gt;
  
                          &lt;/div&gt;
  
                          &lt;div className="col-md-2"&gt;
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                      &lt;div className="row"&gt;
  
                          &lt;div className="col-md-4"&gt;
  
                              &lt;DateRange modalId={"filter-modal-" + modalCounter++}
                                         name="Date Range"
                                         value="~date_range~"
                                         modalTitle="Please Select Date Range"/&gt;
  
                          &lt;/div&gt;
  
                          &lt;div id="" className="col-md-8"&gt;
  
                              &lt;button id="" type="submit" className="btn btn-primary pull-right btn-form-footer"
                                      name="__action__" value="search"&gt;Search
                              &lt;/button&gt;
  
                              &lt;button id="" type="submit" className="btn btn-danger pull-right btn-form-footer"
                                      name="__action__" value="clear"&gt;Clear
                              &lt;/button&gt;
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                  &lt;/form&gt;
              );
          },
  
          findRegion: function (region) {
              var state = {region: JSON.parse(JSON.stringify(region))};
              console.log(region);
              var $this = this;
              if (!!region.id) {
  
                  $.ajax({
                      url: '/search-territories?id=' + region.id,
                      method: "get",
                      success: function (territories) {
                              console.log("TERRITORIES000: ");
                              console.log(territories);
                              territories = JSON.parse(territories);
                              console.log("TERRITORIES111: ");
                              console.log(territories);
  
                          region.areas = territories.filter(function(t) {
                              return t.area.region.id == state.region.id;
                          }).map(function (t) {
                              return t.area;
                          });
                          var areas = {};
                          for(var x in region.areas) {
                              areas[region.areas[x].id] = region.areas[x];
                          }
                          var array = [];
                          for(var x in areas) {
                              array.push(areas[x]);
                          }
                          region.areas = array;
  
                          region.area = region.areas.filter(function(a) {return a.id == state.region.area.id})[0] || $this.emptyArea();
                          region.area = JSON.parse(JSON.stringify(region.area));
                          region.area.territories = [];
                          region.area.territory = $this.emptyTerritory();
                          if (!!region.area.id) {
  
                              console.log("TERRITORIES222: ");
                              console.log(territories);
  
                              region.area.territories = [];
  
                              for(var x in territories) {
                                  if (territories[x].area.id == state.region.area.id) {
                                      region.area.territories.push(territories[x]);
                                  }
                              }
  
                              console.log("ORIGINAL: ");
                              console.log(region.area.territories);
  
                              var trrs = {};
                              for(var x in region.area.territories) {
                                  trrs[region.area.territories[x].id] = region.area.territories[x];
                              }
                              console.log("TERRR:");
                              console.log(trrs);
                              var array = []
  
                              for(var x in trrs) {
                                  array.push(trrs[x]);
                              }
                              console.log("ARRAY:");
                              console.log(array)
                              region.area.territories = array;
  
                              region.area.territory = region.area.territories.filter(function (t) {return t.id = state.region.area.territory.id})[0] || $this.emptyTerritory();
                              region.area.territory = JSON.parse(JSON.stringify(region.area.territory));
                          }
                          console.log("SET STATE: ");
                          console.log(region);
                          $this.setState({region: region});
                      }.bind($this),
                      error: function (x) {
                          try {
                              alert(JSON.parse(x.responseText).message);
                          } catch (e) {
                              alert("Server Error: Please try again.");
                          }
                      }.bind($this),
                  });
  
              }
          },
  
          emptyTerritory: function () {
                      return {
                          id: null,
                          name: "",
                      }
                  },
          emptyArea: function () {
              return {
                  id: null,
                  name: "",
                  territory: this.emptyTerritory(),
                  territories: []
              }
          },
          emptyRegion: function () {
              return {
                  id: null,
                  name: "",
                  area: this.emptyArea(),
                  areas:[]
              }
          }
      });
  
      ReactDOM.render(&lt;Form/&gt;, document.getElementById("filters-div"));
  })();
  </code></pre>