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

Uses the console.log(typeof territories) for discovery type of territory. I believe type is json and you convert json for json. For this the problem ocurred. — Emir Marques
– Emir Marques, Commented Nov 11, 2015 at 11:48

Ele · Accepted Answer · 2015-11-11 12:07:46Z

1

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!

answered Nov 11, 2015 at 12:07

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Grundy Over a year ago

but op get null on client, after parsing, but in json not seen this

Emir Marques Over a year ago

I understand in this question, when printable the object with console.log this not print null values. For this the problem in the JSON.parse

Grundy Over a year ago

@EmirMarques, I get the objects with some of them containing id = null. I don't find any of the object that have id = null., so in json not field id with null, but after parse object have.

Emir Marques Over a year ago

@Grundy Right, after the JSON.parse ;)

Grundy Over a year ago

@EmirMarques, JSON.parse can't return null if in json string not null, so i think here rather problem with console and time when checking

sohan nohemy · Accepted Answer · 2015-11-12 11:12:24Z

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.

Collectives™ on Stack Overflow

Error in JSON parsing Javascript loosing id field

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related