Error in JSON parsing Javascript loosing id field

Question

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?

                        console.log("TERRITORIES000: ");
                        console.log(territories);
                        territories = JSON.parse(territories);
                        console.log("TERRITORIES111: ");
                        console.log(territories);

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.

[ {
  "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 & 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
} ]

This is the entire 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 (<option value={region.id} key={region.id}>{region.name}</option>);
                             });

            var area_ops = this.state.region.areas.map(function (area) {
                                 return (<option value={area.id} key={area.id}>{area.name}</option>);
                             });

            var territory_ops = this.state.region.area.territories.map(function (territory) {
                                 return (<option value={territory.id} key={territory.id}>{territory.name}</option>);
                             });

            return (
                <form>

                    <div className="row">
                        <div className="col-md-2">

                            <div className="form-group">

                                <select className="form-control"
                                value={this.state.region.id}
                                onChange={this.onRegionChange}
                                name="region">
                                    <option value="">Select Region</option>
                                    {region_ops}
                                </select>

                            </div>

                        </div>

                        <div className="col-md-2">

                            <div className="form-group">

                                <select className="form-control"
                                value={this.state.region.area.id}
                                onChange={this.onAreaChange}
                                name="area">
                                    <option value="">Select Area</option>
                                    {area_ops}
                                </select>

                            </div>

                        </div>

                        <div className="col-md-2">

                            <div className="form-group">

                                <select className="form-control"
                                value={this.state.region.area.territory.id}
                                onChange={this.onTerritoryChange}
                                name="territory">
                                    <option value="">Select Territory</option>
                                    {territory_ops}
                                </select>

                            </div>

                        </div>

                        <div className="col-md-3">

                        </div>

                        <div className="col-md-2">

                        </div>

                    </div>

                    <div className="row">

                        <div className="col-md-4">

                            <DateRange modalId={"filter-modal-" + modalCounter++}
                                       name="Date Range"
                                       value="~date_range~"
                                       modalTitle="Please Select Date Range"/>

                        </div>

                        <div id="" className="col-md-8">

                            <button id="" type="submit" className="btn btn-primary pull-right btn-form-footer"
                                    name="__action__" value="search">Search
                            </button>

                            <button id="" type="submit" className="btn btn-danger pull-right btn-form-footer"
                                    name="__action__" value="clear">Clear
                            </button>

                        </div>

                    </div>

                </form>
            );
        },

        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(<Form/>, document.getElementById("filters-div"));
})();

Answer 1

Hi finally I have found the answer. It is really weird. console.log(input) does not copy input if it is an nested object or array, not a primitive. If you change the nested object after calling console.log(), then it will be still reflected in the console window. If you expand the nested object in the console window, you will see the latest state of the object, not the state where you console.log. To see it simply run this code in the console of your browser.

var x = {a: {b: {c: {}}}}
console.log(x)  //Don't look at the console at this time. Let the next line be executed.
x.a.b.c.name = "sohan"
//Then check the console. Expand the nested object. you will be surprised. The console is reflecting the latest state of the nested object.

Answer 2

JSON libraries doesn't allow null objects, if you put a null object in your backend logic, the library won't add it to the JSON structure.

Of course, all of this if you're generating the JSON.

Java - i.e:

JSONObject o = new JSONObject();
o.put("key",null);

If you call o.toString() the result will be:

"{}"

You need to put a NULL object:

JSONObject o = new JSONObject();
o.put("key",JSONObject.NULL);

If you call o.toString() the result will be:

"{\"key\":null}"

If you're not generating the JSON, I can say that the JSON doesn't have any problem, when you're getting the id of an object, the result will be either the ID itself or undefined (null) depending if the id is present in the JSON structure.

Hope this helps!