如何在react Js中根据json类型的数组显示3个或更多表单以构建动态表单答案

【问题标题】：how to show 3 or more form accoring to the aarays of json type in react Js for building daynamic form如何在react Js中根据json类型的数组显示3个或更多表单以构建动态表单
【发布时间】：2018-11-01 05:00:33
【问题描述】：

常量字段 = { { 编号：1，类型：'组'， }, { 编号：2，类型：'文本'，标签：'名称'， group_id：1 }, { 编号：3，类型：'文本'，标签：'地址'， group_id：1 }, { 编号：4，类型：'文本'，标签：“城市”，值：'拉合尔'， group_id：1 }, { 编号：5，类型：'文本'，标签：'状态'，价值：'旁遮普'， group_id：1 }, { 编号：6，类型：'文本'，标签：“国家”，值：'巴基斯坦'， group_id：1 }, { 编号：7，类型：'组'， }, { 编号：8，类型：'日期'， label: '出生日期', group_id: 7 }, { 编号：9，类型：'电子邮件'，标签：'电子邮件'， group_id: 7 }, { 编号：10，类型：'电话'，标签：'电话'， group_id: 7 }, { 编号：11，类型：'颜色'，标签：“颜色”，值：'#ff9900', group_id: 7 }, { 编号：12，类型：'数字'，标签：“年龄”，值：22， group_id: 7 }, { 编号：13，类型：'数字'，标签：“朋友”，值：3， group_id: 7 }, { 编号：14，类型：'select_one'， label: '选择一个城市', 值：'卡拉奇'，选择：['lahore'、'karachi'、'multan'、'faisalabad'、'pishawar'、'queta'、'islamabad'] group_id: 7 }, { 编号：15，类型：'select_one'，标签：“选择一种水果”，值：'桃子'，选择：[“苹果”、“香蕉”、“芒果”、“桃子”、“葡萄”、“松树”、“草莓”] group_id: 7 } }

【问题讨论】：

您可以使用 json linter 来解决这个问题...试试 google。
我正在尝试但没有解决方案。你告诉我如何解决它。
第 1 步：www.google.com - 第 2 步：输入 json linter 并回车... - 第 3 步：使用 linter。祝你好运！
jsonlint.com
以下错误如何解决？错误：第 1 行解析错误：const fields = { { id: ^ Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE ', '{', '[', 得到'未定义'

标签： json reactjs components

【解决方案1】：

这是您的 JSON 对象的正确语法。

 [ 
 { "id": 1,
   "type": "group" 

 },
 { 
  "id": 2,
  "type": "text",
  "label": "Name",
  "group_id": 1 
 },
 { "id": 3,
   "type": "text",
   "label": "Address", 
   "group_id": 1   
},
{ "id": 4,
  "type": "text",
  "label": "City",
  "value": "Lahore",
  "group_id": 1 
}, 
{  "id": 5,
   "type": "text", 
   "label": "State", 
   "value": "Punjab",
   "group_id": 1 
}, 
{ "id": 6,
"type": "text", 
"label": "Country", 
"value": "Pakistan",
"group_id": 1
}, 
{ 
  "id": 7, 
  "type": "group"
},
{ 
  "id": 8, 
  "type": "date",
  "label": "Date of birth",
  "group_id": 7 

},
{ "id": 9, 
  "type": "email", 
  "label": "Email",
  "group_id": 7 
}, 
{ 
  "id": 10, 
  "type": "phone", 
  "label": "Phone", 
  "group_id": 7 

}, 
{ 
  "id": 11, 
  "type": "color", 
  "label": "Color", 
  "value": "#ff9900", 
  "group_id": 7
},
{ 
  "id": 12, 
  "type": "number", 
  "label": "Age", 
  "value": 22, 
  "group_id": 7 
}, 
{ 
  "id": 13, 
  "type": "number", 
  "label": "Friends", 
  "value": 3, 
  "group_id": 7 

}, 
{ "id": 14,
  "type": "select_one", 
  "label": "Select One City", 
  "value": "karachi", 
  "choices": [
               "lahore", 
               "karachi", 
               "multan", 
               "faisalabad", 
               "pishawar", 
               "queta",
               "islamabad"
             ], 
  "group_id": 7 

}, 
{ 
  "id": 15, 
  "type": "select_one", 
  "label": "Select One Fruit", 
  "value":"peach", 
  "choices": [
                "apple", 
                "banana", 
                "mango", 
                "peach", 
                "grapes", 
                "pine", 
                "strawberry"], 
  "group_id": 7 } 
  ]

【讨论】：

【解决方案2】：

这不是 JSON。

首先

JSON 对象以键/值对的形式编写。

这不是写在键值对中的。

键必须是字符串

问题中的键不是字符串，您也应该使用双引号而不是单引号。

第三，

每个键/值对用逗号分隔

如果逗号后面没有键值对，则不要放置逗号。 JSON的一个例子是 { "name":"John", "age":30, "car":null }

参考Mozilla's guide on JSON

您可以使用 JSON Editor Online 检查 JSON 中的错误

【讨论】：

我如何在 ReactJs 中访问我的表单中的 json 键值对
没看懂你的问题，和这个问题有关系吗？至于如何创建键值对？
我如何访问 json 中的 JSON 对象，例如，如果我有三个组，其他组在 200,300,400,500,600 组之外，我在做什么我的外部组来自我设置逻辑的任何组。所以我问你为什么我做一个逻辑如果我点击组 1 或组 2 或组 3 组 200,300,400,500,600 可以根据要求设置在组 1 2 和 3 中，使用状态和过滤器，另请注意：我已经制作来自 JSON 字段的日常表单