对象的 JSON 到达列表元素答案

【问题标题】：JSON Reaching List Element of Object对象的 JSON 到达列表元素
【发布时间】：2019-05-02 22:41:21
【问题描述】：

这可能很愚蠢，但我似乎无法弄清楚。我有一个通过 TypeScript 操作的对象（织物画布）。当我将以下内容放入源代码时，

var objects = this.canvas.getObjects()     
console.log(JSON.stringify(objects[0]));

我明白了

{
  "type": "group",
  ...
  "objects": [
      {
      "type": "path",
      ...

但是如果我把

console.log(JSON.stringify(objects[0].objects));

我明白了

undefined

如果我输入console.log(JSON.stringify(objects[0].type))，我会得到"group"，所以我真的不明白这里发生了什么。我想有一些关于 JS 和/或 TS 的非常基本的事情我没有得到，或者某个地方可能缺少逗号。

编辑：

这是console.log(JSON.stringify(objects[0],null,1)) 的完整输出，以防我粘贴错误：

{
 "type": "group",
 "originX": "left",
 "originY": "top",
 "left": 94.83,
 "top": 83.17,
 "width": 69,
 "height": 47,
 "fill": "transparent",
 "stroke": null,
 "strokeWidth": 0,
 "strokeDashArray": null,
 "strokeLineCap": "butt",
 "strokeLineJoin": "miter",
 "strokeMiterLimit": 10,
 "scaleX": 1,
 "scaleY": 1,
 "angle": 0,
 "flipX": false,
 "flipY": false,
 "opacity": 0.5,
 "shadow": null,
 "visible": true,
 "clipTo": null,
 "backgroundColor": "",
 "fillRule": "nonzero",
 "globalCompositeOperation": "source-over",
 "transformMatrix": null,
 "skewX": 0,
 "skewY": 0,
 "objects": [
  {
   "type": "path",
   "originX": "center",
   "originY": "center",
   "left": 0,
   "top": 0,
   "width": 68,
   "height": 46,
   "fill": "#c9c9c9",
   "stroke": "transparent",
   "strokeWidth": 1,
   "strokeDashArray": null,
   "strokeLineCap": "round",
   "strokeLineJoin": "round",
   "strokeMiterLimit": 10,
   "scaleX": 1,
   "scaleY": 1,
   "angle": 0,
   "flipX": false,
   "flipY": false,
   "opacity": 1,
   "shadow": null,
   "visible": true,
   "clipTo": null,
   "backgroundColor": "",
   "fillRule": "nonzero",
   "globalCompositeOperation": "source-over",
   "transformMatrix": null,
   "skewX": 0,
   "skewY": 0,
   "pathOffset": {
    "x": 129.33333333333331,
    "y": 106.66666666666666
   },
   "path": [
    [
     "M",
     150.16666666666666,
     110.33333333333333
    ],
    [
     "Q",
     150.16666666666666,
     110.33333333333333,
     150.66666666666666,
     110.33333333333333
    ],
    [
     "Q",
     151.16666666666666,
     110.33333333333333,
     150.91666666666666,
     110.33333333333333
    ],
    [
     "Q",
     150.66666666666666,
     110.33333333333333,
     150.66666666666666,
     111
    ],
    [
     "Q",
     150.66666666666666,
     111.66666666666666,
     150,
     112
    ],
    [
     "Q",
     149.33333333333331,
     112.33333333333333,
     147.33333333333331,
     114
    ],
    [
     "Q",
     145.33333333333331,
     115.66666666666666,
     143.66666666666666,
     117
    ],
    [
     "Q",
     142,
     118.33333333333333,
     140.33333333333331,
     119.66666666666666
    ],
    [
     "Q",
     138.66666666666666,
     121,
     136.66666666666666,
     122
    ],
    [
     "Q",
     134.66666666666666,
     123,
     132.33333333333331,
     124
    ],
    [
     "Q",
     130,
     125,
     127,
     126
    ],
    [
     "Q",
     124,
     127,
     121.66666666666666,
     128
    ],
    [
     "Q",
     119.33333333333333,
     129,
     117.33333333333333,
     129.33333333333331
    ],
    [
     "Q",
     115.33333333333333,
     129.66666666666666,
     113,
     129.66666666666666
    ],
    [
     "Q",
     110.66666666666666,
     129.66666666666666,
     109,
     129.66666666666666
    ],
    [
     "Q",
     107.33333333333333,
     129.66666666666666,
     106.33333333333333,
     129.66666666666666
    ],
    [
     "Q",
     105.33333333333333,
     129.66666666666666,
     104.66666666666666,
     129.66666666666666
    ],
    [
     "Q",
     104,
     129.66666666666666,
     103,
     129
    ],
    [
     "Q",
     102,
     128.33333333333331,
     101,
     126.66666666666666
    ],
    [
     "Q",
     100,
     125,
     99,
     123.33333333333333
    ],
    [
     "Q",
     98,
     121.66666666666666,
     97.33333333333333,
     119.33333333333333
    ],
    [
     "Q",
     96.66666666666666,
     117,
     96.33333333333333,
     114
    ],
    [
     "Q",
     96,
     111,
     95.66666666666666,
     109
    ],
    [
     "Q",
     95.33333333333333,
     107,
     95.33333333333333,
     104.66666666666666
    ],
    [
     "Q",
     95.33333333333333,
     102.33333333333333,
     95.33333333333333,
     100.66666666666666
    ],
    [
     "Q",
     95.33333333333333,
     99,
     95.33333333333333,
     97.33333333333333
    ],
    [
     "Q",
     95.33333333333333,
     95.66666666666666,
     95.66666666666666,
     94.33333333333333
    ],
    [
     "Q",
     96,
     93,
     98,
     91.66666666666666
    ],
    [
     "Q",
     100,
     90.33333333333333,
     103.66666666666666,
     88.66666666666666
    ],
    [
     "Q",
     107.33333333333333,
     87,
     111,
     86
    ],
    [
     "Q",
     114.66666666666666,
     85,
     120,
     84.33333333333333
    ],
    [
     "Q",
     125.33333333333333,
     83.66666666666666,
     130.66666666666666,
     83.66666666666666
    ],
    [
     "Q",
     136,
     83.66666666666666,
     143.33333333333331,
     83.66666666666666
    ],
    [
     "Q",
     150.66666666666666,
     83.66666666666666,
     153,
     83.66666666666666
    ],
    [
     "Q",
     155.33333333333331,
     83.66666666666666,
     157.33333333333331,
     84.33333333333333
    ],
    [
     "Q",
     159.33333333333331,
     85,
     160,
     85.33333333333333
    ],
    [
     "Q",
     160.66666666666666,
     85.66666666666666,
     161.33333333333331,
     86.33333333333333
    ],
    [
     "Q",
     162,
     87,
     162.33333333333331,
     87
    ],
    [
     "Q",
     162.66666666666666,
     87,
     163,
     87.33333333333333
    ],
    [
     "Q",
     163.33333333333331,
     87.66666666666666,
     163.33333333333331,
     88
    ],
    [
     "Q",
     163.33333333333331,
     88.33333333333333,
     163.33333333333331,
     88.66666666666666
    ],
    [
     "Q",
     163.33333333333331,
     89,
     163.33333333333331,
     89
    ],
    [
     "Q",
     163.33333333333331,
     89,
     163.33333333333331,
     89
    ],
    [
     "L",
     163.33333333333331,
     89
    ]
   ]
  }
 ]
}

【问题讨论】：

你确定属性名真的是objects吗？也许它包含尾随或前导空格或其他一些不可打印的字符。 console.log(typeof objects[0].objects) 给你什么？或者，您确定 objects 实际上是顶级对象的属性吗？您在 JSON 表示中留下了一堆信息 (...)。
我添加了完整的输出。 console.log(typeof objects[0].objects) 给我undefined。
如果你得到 undefined 则意味着该属性不会退出。 objects[0] 有 toJSON 方法吗？这可以解释为什么该属性在 JSON 中可见但实际上并不存在于对象上。
@yam 发布的 JSON 是你所拥有的吗？因为我复制了 JSON 并控制台 data.objects 的值给了我正确的数据！
请您从var objects = this.canvas.getObjects()对象中复制2或3个样本数据

标签： javascript angular typescript fabricjs

【解决方案1】：

Felix Kling's suggestion 就在这里。当一个 JS 对象有自己的 toJSON() 实现时，JSON.stringify() 调用它而不是默认的：toJSON() behavior。

Fabric.js 对象正是这样做的：fabric.Group.prototype.toJSON()。如您所见，objects 数组实际上存储在_objects 属性中，但是当您序列化组时，它们会映射到objects：

toObject: function(propertiesToInclude) {
  var _includeDefaultValues = this.includeDefaultValues;
  var objsToObject = this._objects.map(function(obj) {
    var originalDefaults = obj.includeDefaultValues;
    obj.includeDefaultValues = _includeDefaultValues;
    var _obj = obj.toObject(propertiesToInclude);
    obj.includeDefaultValues = originalDefaults;
    return _obj;
  });
  var obj = fabric.Object.prototype.toObject.call(this, propertiesToInclude);
  obj.objects = objsToObject;
  return obj;
},

【讨论】：

【解决方案2】：

我更愿意将此作为评论发布，但没有足够的代表

你试过这样称呼它吗？ console.log(JSON.stringify(objects[0]["objects"]))

【讨论】：

我做了，得到了同样的结果。