JSON 解析 Javascript 丢失 id 字段时出错答案

【问题标题】：Error in JSON parsing Javascript loosing id fieldJSON 解析 Javascript 丢失 id 字段时出错
【发布时间】：2015-11-11 11:06:22
【问题描述】：

当我用 JSON.parse() 解析这个字符串时。我得到了其中一些包含 id = null 的对象。我没有找到任何 id = null 的对象。真的有问题吗？

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

我看到名为“B.C Paul (B.Baria, Akhaura)”的领土包含 id = null。但它的 id 在 json 字符串中不为空。我正在chrome浏览器中测试它。很奇怪。

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

这是完整的代码

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

【问题讨论】：

地区的内容是什么？
你能提供工作的 jsfiddle 吗？
这是我第一次在@Emir Morques 发布的json 字符串。
为我工作。看：jsfiddle.net/emirdeliz/zvw1jda3
使用console.log(typeof 地区) 发现地区类型。我相信类型是 json，你将 json 转换为 json。为此，出现了问题。

标签： javascript json reactjs

【解决方案1】：

JSON 库不允许空对象，如果您在后端逻辑中放置空对象，库将不会将其添加到 JSON 结构中。

当然，如果您要生成 JSON，那么所有这些都是。

Java - 即：

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

如果您调用 o.toString()，结果将是：

"{}"

你需要放一个NULL对象：

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

如果您调用 o.toString()，结果将是：

"{\"key\":null}"

如果您不生成 JSON，我可以说 JSON 没有任何问题，当您获取对象的 id 时，结果将是 ID本身或未定义（null），具体取决于 id 是否存在于 JSON 结构中。

希望这会有所帮助！

【讨论】：

但是op在客户端解析后得到null，但是在json中没有看到这个
我理解这个问题，当使用 console.log 打印对象时，这不会打印空值。为此，JSON.parse 中的问题
@EmirMarques，我得到了其中一些包含 id = null 的对象。我没有找到任何具有 id = null 的对象。，所以在 json 中不是字段 id 为 null，但在解析对象之后有。
@Grundy 对，在 JSON.parse 之后；)
@EmirMarques, JSON.parse can't return null if in json string not null，所以我认为这里是控制台和检查时的问题

【解决方案2】：

嗨，我终于找到了答案。这真的很奇怪。如果输入是嵌套对象或数组，而不是原语，则 console.log(input) 不会复制输入。如果在调用 console.log() 之后更改了嵌套对象，那么它仍然会反映在控制台窗口中。如果您在控制台窗口中展开嵌套对象，您将看到该对象的最新状态，而不是您在 console.log 中的状态。要查看它，只需在浏览器的控制台中运行此代码即可。

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.

【讨论】：