JS根据字符串获得变量数据的问题

cqwcns · 发表于 2021-12-14 16:18

微信小程序，在JS的data中，我们有一个叫new_form的数组，用来做前端列表渲染。

[JavaScript] 纯文本查看 复制代码

 new_form: [
      { type: 'textarea', name: 'new_title', title: '标题', isMust: true },
      { type: 'picker', name: 'new_indexUrgency', title: '紧急程度', range: ['一般', '急', '特急'], value: 0 },
      { type: 'picker', name: 'new_indexDemandType', title: '业务需求', range: ['新建', '迁移'], value: 0 },
      { type: 'textarea', name: 'new_oldSite', title: '旧站点名' },
      { type: 'textarea', name: 'new_site', title: '站点名', isMust: true },
      { type: 'multiPicker', name: 'new_indexSubDistrict', title: '站点区域', range: [['茂南', '电白', '高州', '化州', '信宜'], ['城南街道', '红旗街道', '河西街道', '河东街道']], value: [0, 0] },
{ type: 'time', mode: 'dateTime', name: 'new_completionLimit', title: '完成时限' },
{ type: 'input', name: 'new_regionHead', title: '区域负责人' }
    ]

页面会传回来一下参数，用于单表修改时触发改变value。
为了函数的灵活性和开展性，传回来的参数相当于一个路径，例如这样：new_form[5]

我希望在JS事件中通过参数获得数据位置，并修改数据，不知道应该怎么操作。

[JavaScript] 纯文本查看 复制代码

const { column, value } = e.detail,
        { target } = e.currentTarget.dataset;  //new_form[5]

即如何通过字符串”new_form[5]“，获得对应的range数据”[['茂南', '电白', '高州', '化州', '信宜'], ['城南街道', '红旗街道', '河西街道', '河东街道']]“。

时光稀释 · 发表于 2021-12-14 16:48

我说下常规JS ，直接转换成对象数组，然后用对象名.属性
var objArr = [
{ type: 'textarea', name: 'new_title', title: '标题', isMust: true },
{ type: 'picker', name: 'new_indexUrgency', title: '紧急程度', range: ['一般', '急', '特急'], value: 0 },
{ type: 'picker', name: 'new_indexDemandType', title: '业务需求', range: ['新建', '迁移'], value: 0 },
{ type: 'textarea', name: 'new_oldSite', title: '旧站点名' },
{ type: 'textarea', name: 'new_site', title: '站点名', isMust: true },
{ type: 'multiPicker', name: 'new_indexSubDistrict', title: '站点区域', range: [['茂南', '电白', '高州', '化州', '信宜'], ['城南街道', '红旗街道', '河西街道', '河东街道']], value: [0, 0] },
{ type: 'time', mode: 'dateTime', name: 'new_completionLimit', title: '完成时限' },
{ type: 'input', name: 'new_regionHead', title: '区域负责人' }
]

JSON.stringify(objArr[5].range)
"[["茂南","电白","高州","化州","信宜"],["城南街道","红旗街道","河西街道","河东街道"]]"

HappyCrazy · 发表于 2021-12-14 16:48

本帖最后由 HappyCrazy 于 2021-12-14 16:50 编辑

应该是你要的结果

[JavaScript] 纯文本查看 复制代码

    let new_form = [
      {
        type: 'textarea',
        name: 'new_title',
        title: '标题',
        isMust: true,
      },
      {
        type: 'picker',
        name: 'new_indexUrgency',
        title: '紧急程度',
        range: ['一般', '急', '特急'],
        value: 0,
      },
      {
        type: 'picker',
        name: 'new_indexDemandType',
        title: '业务需求',
        range: ['新建', '迁移'],
        value: 0,
      },
      {
        type: 'textarea',
        name: 'new_oldSite',
        title: '旧站点名',
      },
      {
        type: 'textarea',
        name: 'new_site',
        title: '站点名',
        isMust: true,
      },
      {
        type: 'multiPicker',
        name: 'new_indexSubDistrict',
        title: '站点区域',
        range: [
          ['茂南', '电白', '高州', '化州', '信宜'],
          ['城南街道', '红旗街道', '河西街道', '河东街道'],
        ],
        value: [0, 0],
      },
      {
        type: 'time',
        mode: 'dateTime',
        name: 'new_completionLimit',
        title: '完成时限',
      },
      {
        type: 'input',
        name: 'new_regionHead',
        title: '区域负责人',
      },
    ];
    let item = 'new_form[5]'; //传递的变量 e.currentTarget.dataset
    let range = [];
    for (let i = 0; i < new_form.length; i++) {
      if (`new_form[${i}]` === item) {
        range = new_form[i].range;
      }
    }
    console.log(range);

拉格朗日之都 · 发表于 2021-12-14 16:51

如果知道索引index，那不是直接new_form[5].range就行吗？如果不知道index，那一定得知道一个唯一值，比如name=new_indexSubDistrict，那么可以这样：let range= new_form.find(el => el.name === 'new_indexSubDistrict').range 。这个range就是你要的了

HULANG-BTB · 发表于 2021-12-14 16:51

[JavaScript] 纯文本查看 复制代码

const new_form = [
  { type: "textarea", name: "new_title", title: "标题", isMust: true },
  { type: "picker", name: "new_indexUrgency", title: "紧急程度", range: ["一般", "急", "特急"], value: 0 },
  { type: "picker", name: "new_indexDemandType", title: "业务需求", range: ["新建", "迁移"], value: 0 },
  { type: "textarea", name: "new_oldSite", title: "旧站点名" },
  { type: "textarea", name: "new_site", title: "站点名", isMust: true },
  {
    type: "multiPicker",
    name: "new_indexSubDistrict",
    title: "站点区域",
    range: [
      ["茂南", "电白", "高州", "化州", "信宜"],
      ["城南街道", "红旗街道", "河西街道", "河东街道"],
    ],
    value: [0, 0],
  },
  { type: "time", mode: "dateTime", name: "new_completionLimit", title: "完成时限" },
  { type: "input", name: "new_regionHead", title: "区域负责人" },
];

const target = "new_form[5]";

// 1、获取参数索引
const index = parseInt(target.replace(/new_form\[(\d+)\]/, "$1") || "-1");

// 2、数组取值
const dist = new_form[index];

if (!dist) {
  // 错误处理
}

const data = console.log(dist.range);

xuexiba · 发表于 2021-12-14 20:34

根据这篇帖子，解决我另一个问题。

不苦小和尚 · 发表于 2021-12-14 21:17

var data = [
{ type: 'textarea', name: 'new_title', title: '标题', isMust: true },
{ type: 'picker', name: 'new_indexUrgency', title: '紧急程度', range: ['一般', '急', '特急'], value: 0 },
{ type: 'picker', name: 'new_indexDemandType', title: '业务需求', range: ['新建', '迁移'], value: 0 },
{ type: 'textarea', name: 'new_oldSite', title: '旧站点名' },
{ type: 'textarea', name: 'new_site', title: '站点名', isMust: true },
{ type: 'multiPicker', name: 'new_indexSubDistrict', title: '站点区域', range: [['茂南', '电白', '高州', '化州', '信宜'], ['城南街道', '红旗街道', '河西街道', '河东街道']], value: [0, 0] },
{ type: 'time', mode: 'dateTime', name: 'new_completionLimit', title: '完成时限' },
{ type: 'input', name: 'new_regionHead', title: '区域负责人' }
]

var {range} = data[5]
range

cqwcns · 发表于 2021-12-15 09:26

看了大家的建议，基本都写死了路径（new_form），不够灵活。
自己改变了一下思路，传参格式改为逗号分隔的路径，如new_form,5。
再循环叠加出数据路径。
效果实现。

[JavaScript] 纯文本查看 复制代码

      const { column, value } = e.detail,
        { target } = e.currentTarget.dataset,   // new_form,5
        arrTarget = target.split(',');   // ['new_form',5]

      let data = that.data;    // 数据源
      arrTarget.forEach(el => {
        data = data[el]
      });

      // that.data[new_form][5]
      console.log(data)   // 正常输出结果

帐号		自动登录	找回密码
密码			注册[Register]

[求助] JS根据字符串获得变量数据的问题

免费评分

免费评分

免费评分