如何创建一个基于当前嵌套对象和数组的新对象?

时间:2018-07-15 22:55:31

标签: arrays object recursion vue.js

我得到了数据的嵌套对象:

forms: {
        firstForm: {
          name: 'firstForm',
          elements: {
            element1: {
              value: '',
              dummyProp1: 'element1',
              dummyProp2: ''
            },
            element2: {
              value: '',
              dummyProp1: 'element2',
              dummyProp2: '',
              options: [1,2,3]
            }
          }
        },
        secondForm: {
          name: 'secondForm',
          elements: [
            {
                name: 'sectionFirst',
                subsections: [
                  {
                      name: 'subsectionFirst',
                      currentOptions: [
                        {
                          value: '',
                          valueNeedsToo: [1],
                          dummyProp1: 'dummyProp1',
                        },
                        {
                          value: '',
                          valueNeedsToo: [2],
                          dummyProp1: 'dummyProp1',
                        }
                      ]
                  },
                  {
                      name: 'subsectionSecond',
                      currentOptions: [
                        {
                          value: '',
                          valueNeedsToo: [3],
                          dummyProp1: 'dummyProp1',
                        },
                        {
                          value: '',
                          valueNeedsToo: [4],
                          dummyProp1: 'dummyProp1',
                        }
                      ]
                  }
                ]
            },
            {
                name: 'sectionSecond',
                subsections: [
                  {
                      name: 'subsectionFirst',
                      currentOptions: [
                        {
                          value: '',
                          valueNeedsToo: [5],
                          dummyProp1: 'dummyProp1',
                        },
                        {
                          value: '',
                          valueNeedsToo: [6],
                          dummyProp1: 'dummyProp1',
                        }
                      ]
                  },
                  {
                      name: 'subsectionSecond',
                      currentOptions: [
                        {
                          value: '',
                          valueNeedsToo: [7],
                          dummyProp1: 'dummyProp1',
                        },
                        {
                          value: '',
                          valueNeedsToo: [8],
                          dummyProp1: 'dummyProp1',
                        }
                      ]
                  }
                ]
            }
          ]
        }
      }

用户输入所有更改后-它需要构建一个新对象以发送到后端。 考虑到firstForm,答案是:

 Object.keys(vm.forms.firstForm.elements).map(function(a) {
        dataToSend.firstForm.elements[a] = {
          'value': vm.forms.firstForm.elements[a].value
        }
      }); //not the best implementation cause it's obligatory to specify the structure of dataToSend

因此,让我们考虑secondForm。在这里,我可以使用forEach,但是我不认为这种方式是一种好方法。我认为递归在这里会很好,但不知道如何实现。

最后,作为创建对象的帮手,我得到的是:

buildDataToSend: function(pathArray, propsArray) {
      var result = {};

      for (var i = 0; i < pathArray.length; i++) {

        if (pathArray[i].indexOf('.') !== -1) {
          var nestedPropArray = pathArray[i].split('.');
          var nestedPropIndex = pathArray.indexOf(pathArray[i])

          pathArray.splice.apply(pathArray, [nestedPropIndex, 1].concat(nestedPropArray));
        }

      }

      pathArray.reduce(function(o, s) {
        return o[s] = {};
      }, result);

      return result;
    }


vm.buildDataToSend(['secondForm.elements', 'subsections', 'currentOptions'],['value', 'valueNeedsToo']);

它返回必要的结构,但我不知道如何在特定级别之间插入数组。

P.S。在这里发布所有代码不是一个好主意,这就是为什么我向您提供the codepen link。请检查控制台以了解我想要的东西。

0 个答案:

没有答案