FireStore错误:不支持"嵌套数组。FiRestore/p5.js问题

firestore error:quot;Nested arrays are not supportedquot;. Firestore/p5.js problem(FireStore错误:不支持quot;嵌套数组。FiRestore/p5.js问题)
本文介绍了FireStore错误:不支持"嵌套数组。FiRestore/p5.js问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有人能帮我更好地理解此错误吗?我正在尝试使用p5.js和Firebase/Firestore来创建一个站点,在该站点中,您可以在画布上绘制某个东西,然后它会将图形保存到Firestore,但当我单击保存时,我收到以下错误:

错误.ts:166未捕获Firebase错误:使用无效数据调用了函数DocumentReference.set()。不支持嵌套数组

我到目前为止的代码:

var drawing = [];
var currentPath = [];
var isDrawing = false;

function setup() {
    canvas = createCanvas(400,400);
    canvas.mousePressed(startPath);
    canvas.parent('canvas');
    canvas.mouseReleased(endPath);
    var saveButton = select('#saveButton');
    saveButton.mousePressed(saveDrawing);
}

function startPath() {
    isDrawing = true;
    currentPath = [];
    drawing.push(currentPath);
}

function endPath() {
    isDrawing = false;
}

function draw() {
    background(0);

    if (isDrawing){
        var point = {
        x: mouseX,
        y: mouseY
        }
    currentPath.push(point);
    }

    stroke(255);
    strokeWeight(7);
    noFill();
    for (var i = 0; i < drawing.length; i++) {
        var path = drawing[i];
        beginShape();
        for (var k = 0; k < path.length; k++) {
            vertex(path[k].x, path[k].y)
        }
        endShape();
    }
}

function saveDrawing(){
    db.collection('joonistused').add({
        drawing: drawing
    });
    var result = ref.push(data, dataSent);
    console.log(result.key)

    function dataSent(status) {
        console.log(status);
    }
}

编辑:如何将数组中的图形坐标存储到FireStore?就像将我的图形保存到FireStore中?

推荐答案

实际上,drawing是一个数组,其中直接项也是数组。由于一些技术限制,FireBase似乎不允许数组的数组。

这个similar question on StackOverflow的答案说明您仍然可以间接拥有数组的数组,如Troy Michael所述:

您可以修改一个序列化函数,将具有对象类型的数组转换为映射。键可以是数字以维护顺序。

即{1:对象,2:对象2...}

在反序列化时,您可以获取Object.Values(Data);以将其放回数组中以供客户端使用。

您可以这样做,或者简单地将子数组嵌套到对象中,其中drawing类似于[ { items: [ ... items of array ...] }, ... ]。请注意,现在drawing是一个对象数组,其中每个对象都有一个名为items的字段,这是一个项数组。根据引用的问题,似乎可以绕过这个限制。

这篇关于FireStore错误:不支持&quot;嵌套数组。FiRestore/p5.js问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

本文给大家介绍Javascript js中实现和PHP一样的时间戳格式化函数的方法,具有一定的参考借鉴价值,需要的朋友可以参考下,我们知道在php中有一个date()函数,可以方便的把时间戳格式化为时间字符串。可是在js中,我们要想实现这种效果,要写好
需求是模板字符串中不允许出现script 标签、不允许有javascript: 和 .js 文件引用,主要方法如下: clearScriptTag (str) { const reg = /script[^]*([\S\s]*?)\/script/gim; // 清除标签内 相关 xss 安全代码 const reg1 = /javascript:/gim; const reg2 = / *.js/gim; if (reg.test(str)) { str
javascript中Replace全部替换字符用法实例代码,替换1次和多次,主要是正则表达式 var r= "1\n2\n3\n";//将字母\n替换成分号alert(r.replace("\n",";"));//结果:1;2\n3\n 只替换了第一个var r= "1\n2\n3\n";//将字母\n替换成分号alert(r.replace(/\n/g, ";"));//结果:1;2;3; replac
js输出当前日期和时间的实例代码,具体实例代码如下,有兴趣的朋友可以尝试运行下。 !doctype htmlhtml lang="en" head meta charset="UTF-8" title获取当前时间/title /head body script type="text/javascript" /** *获取当前时间 *format=1精确到天 *format=2精确到秒 */ function
p5.js WebGL 3d graphics covered by 2d background when rotated(P5.js旋转时被2D背景覆盖的WebGL 3D图形)
Static vector field with classic arrows at every point on p5.js(P5.js上每个点都有经典箭头的静态向量场)