前端 - js 如何弄成一维数组?

Question

数据格式如下：

result{
    template{
        component:[
            0:{
                businessType: 1,
                fkId: null,
                fkId2: null,
                fkId3: null,
                id: "1186526684214359690",
                isTable: 0,
                name: "单行文本",
                sort: 1,
                tag: "s_ypmc",
                type: 1
                attr: {
                    defaultValue: "大萨达",
                    display: "inline-block",
                    fkCaseIds: "",
                    icon: "ios-paper",
                    title: "样品名称",
                    significant: "0",
                }
            },
            1:{
                attr: {
                    cutLine: "1",
                    defaultValue{
                        id: "1207679349805467446",
                        isTitle: "0",
                        oldId: "1207679349805467446",
                        val: "化学实验室",
                    },
                    desc: "",
                    display: "inline-block",
                    formulaLock: "",
                    hasOther: "0",
                    icon: "android-arrow-dropdown",
                    isExternalScan: "1",
                    isInReport: "1",
                    isOpenOther: "0",
                    required: "0",
                    ruleName: "",
                    tag: null,
                    title: "位置",
                    type: "dropdown",
                    width: "100",
                    vals: [
                        {
                            checked: "0",
                            id: "1202670341805467441",
                            isTitle: "0",
                            oldId: "1202670341805467441",
                            val: "前台"
                        },
                        {
                            checked: "0",
                            id: "1208678341802464441",
                            isTitle: "0",
                            oldId: "1208678341802464441",
                            val: "制样"
                        }
                    ]

                },
            }
        ],
        nameTemplate: "sdasdasdasdasdasdnyhyhn",
        id: "1149528905150315886",
        tag: "s_ypmc",
        type: 1
    }
}

ui效果图

目前api接口只有位置返回位置和样品名称这两个个选项， tag是表格的标识，数据太多就省列了

功能点是 点击搜索样品id得出效果图的一行数据，也就是一个id只能搜索出一条数据，
请问大佬们 这个要如何弄呢？

Answer 1

用递归：

function flatten(obj, prefix = '', result = []) {
  for (const key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      flatten(obj[key], prefix + key + '.', result);
    } else {
      result.push({ key: prefix + key, value: obj[key] });
    }
  }
  return result;
}

const flattened = flatten(result);
console.log(flattened);

find 查找你要的某一项：

function findValueByKey(array, key, value) {
  return array.find(item => item.key === key && item.value === value);
}

const foundItem = findValueByKey(flattened, 'template.component.0.id', '1186526684214359690');
console.log(foundItem);

接口返回处理：

async function getTabledata() {
  await this.getSampleBroswer({ params: { id: this.input.number } }).then(res => {
    if (res.status === 200) {
      const { template } = res.result;
      console.log(template);

      const flattened = flatten(template);
      console.log(flattened);

      const foundItem = findValueByKey(flattened, 'template.component.0.id', '1186526684214359690');
      console.log(foundItem);
    }
  });
}

ts+vue2:

// 在Vue组件外部定义接口
interface FlatObject {
  key: string;
  value: any;
}

// 更新flattenAndFind函数
function flattenAndFind(
  obj: any,
  targetKey: string,
  targetValue: any,
  prefix: string = '',
  result: FlatObject[] = []
): FlatObject | null {
  if (typeof obj !== 'object') {
    return null;
  }

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const currentKey = prefix + key;

      if (key === targetKey && obj[key] === targetValue) {
        return { key: currentKey, value: obj[key] };
      } else if (typeof obj[key] === 'object') {
        const found = flattenAndFind(obj[key], targetKey, targetValue, currentKey + '.', result);
        if (found) {
          return found;
        }
      }
    }
  }

  return null;
}

// 组件中的代码
async getTabledata(this: any) {
  await this.getSampleBroswer({ params: { id: this.input.number } }).then(res => {
    if (res.status == 200) {
      const { template } = res.result;
      console.log(template);

      // 使用flattenAndFind函数
      const targetKey = 'tag'; // 你需要查找的键
      const targetValue = 's_ypmc'; // 你需要查找的值
      const foundItem = flattenAndFind(template, targetKey, targetValue);

      if (foundItem) {
        console.log('找到的项: ', foundItem);
        // 在这里处理找到的项
      } else {
        console.log('未找到匹配的项');
      }
    }
  });
}

用这个方法试试：

async getTabledata(this: any) {
    await this.getSampleBroswer({ params: { id: this.input.number } }).then(res => {
        if (res.status == 200) {
            const { template } = res.result;
            console.log(template);

            
            const flattenedArray = template.component.map((item: any) => {
                return [
                    item.businessType,
                    item.id,
                    item.name
                ];
            }).flat();

            console.log(flattenedArray); // 输出处理后的一维数组
        }
    });
},