飞道科技

飞道科技文档总汇

获取节点行数据

在代码中对行数据进行序列化并渲染到节点上

import render from '@feidao/web/atom/nodejs/render/render';
import p001 from './p001';
const data = [{_id:'a',name:'张三'},{_id:'b',name:'李四'},{_id:'c',name:'王 五'}];

const res = data.map((item)=>{
	return {...item, v: JSON.stringify(item)}
});

render(fd.data.node, res, p001, 'p001');


<div data-feidao-actions="click:a001" data-v=></div>

现象

在响应a001中获取当前事件对象上data-v的属性值

import { IFeidaoAiBrowserComponent } from '@feidao/web/interfaces';
export default async function a001(fd: IFeidaoAiBrowserComponent, ...args: any[]) {
	const target = args[0].currentTarget as HTMLDivElement;
	// 获取data-v的值并反序列化得到行数据
	const v = target.getAttribute('data-v');
	const d = JSON.parse(v);
}

错误信息为

VM7510:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at <anonymous>:1:6`

解决办法

  1. 对数据内容进行编码
import { IFeidaoAiNodejsPage } from '@feidao/web/interfaces';
import render from '@feidao/web/atom/nodejs/render/render';
import p001 from './p001';
import encode from '@feidao/web/atom/core/str/encode';

export default async function na002(fd: IFeidaoAiNodejsPage, ...args: any[]) {
	const data = [{ _id: 'a', name: '张三' }, { _id: 'b', name: '李四' }, { _id: 'c', name: '王 五' }];

	const res = data.map((item) => {
		return { ...item, v: encode(JSON.stringify(item)) };
	});

	render(fd.data.node, res, p001, 'p001');
}

在响应中获取内容后再进行解码

import { IFeidaoAiBrowserComponent } from '@feidao/web/interfaces';
import decode from '@feidao/web/atom/core/str/decode';

export default async function a001(fd: IFeidaoAiBrowserComponent, ...args: any[]) {
	const target = args[0].currentTarget as HTMLDivElement;
	// 获取data-v的值并反序列化得到行数据
	const v = target.getAttribute('data-v');
	const d = JSON.parse(decode(v));
}
  1. 在p001模板中进行修改，在渲染属性值时添加''

<div data-feidao-actions="click:a001" data-v=''></div>

问题分析

数据中包含空格，在渲染的tpl中如果没有进行''包裹，渲染到页面的内容为data-v="{"_id":"c","name":"王"，在属性值中碰到空格则认为此属性值已经结束造成属性值不是序列化后的结果，所以反序列化就会报错。