代码之家  ›  专栏  ›  技术社区  ›  Mo.

如何将映射结果合并到一个数组对象?

ecmascript-6 loops json arrays javascript
  •  1
  • Mo.  · 技术社区  · 1 年前

    对象结果重构函数工作良好,同时映射结果不在一个数组组中。 

    console.clear();
const filterList = {
  ageRange: ["ageRange", "picAgeRange"],
  goal: ["goal", "motivation"],
  hairColor: ["hairColor", "picHairColor"]
};

const questionList = [{
    question: "ageRange",
    lastUpdated: "2018-07-09T18:13:42.541",
    info: null,
    type: "SELECT",
    answers: [{
        value: "18-30",
        selected: true
      },
      {
        value: "31-35",
        selected: false
      },
      {
        value: "36-45",
        selected: false
      },
      {
        value: "46-55",
        selected: false
      },
      {
        value: "55+",
        selected: false
      }
    ]
  },
  {
    question: "picAgeRange",
    lastUpdated: "2018-07-09T18:13:42.541",
    info: null,
    type: "SELECT",
    answers: [{
        value: "country 6",
        selected: true
      },
      {
        value: "smart casual 4",
        selected: false
      },
      {
        value: "dark denim 6",
        selected: false
      },
      {
        value: "sporty 6",
        selected: false
      },
      {
        value: "adventure 5",
        selected: false
      },
      {
        value: "prints 5",
        selected: false
      },
      {
        value: "excentric 5",
        selected: false
      },
      {
        value: "dont like any private style",
        selected: false
      }
    ]
  },
  {
    question: "goal",
    lastUpdated: "2018-07-09T18:13:42.541",
    info: null,
    type: "SELECT",
    answers: [{
        value: "save time",
        selected: true
      },
      {
        value: "personal advice",
        selected: false
      },
      {
        value: "inspiration",
        selected: false
      },
      {
        value: "testing the service",
        selected: false
      }
    ]
  },
  {
    question: "hairColor",
    lastUpdated: "2018-07-09T18:13:49.567",
    info: null,
    type: "SELECT",
    answers: [{
        value: "blond",
        selected: true
      },
      {
        value: "brown",
        selected: false
      },
      {
        value: "black",
        selected: false
      },
      {
        value: "red",
        selected: false
      },
      {
        value: "grey",
        selected: false
      },
      {
        value: "noHair",
        selected: false
      }
    ]
  },
  {
    question: "picHairColor",
    lastUpdated: "2018-07-09T18:13:42.541",
    info: null,
    type: "SELECT",
    answers: [{
        value: "suit 3",
        selected: true
      },
      {
        value: "business casual",
        selected: false
      },
      {
        value: "casual",
        selected: false
      },
      {
        value: "have to wear uniform",
        selected: false
      },
      {
        value: "classic",
        selected: false
      },
      {
        value: "conservative",
        selected: false
      },
      {
        value: "relaxed 2",
        selected: false
      },
      {
        value: "dont like any work style",
        selected: false
      }
    ]
  }
];

const ofQuestionsList = Object.entries(filterList).map(
  ([questionKey, questionNames]) => {
    return {
      [questionKey]: questionList.filter((item) =>
        questionNames.includes(item.question)
      )
    };
  }
);
console.log(ofQuestionsList);

    现有结果为 

    [
  {
    "ageRange": [
      {
        "question": "ageRange",
        "lastUpdated": "2018-07-09T18:13:42.541",
        "info": null,
        "type": "SELECT"
      },
      {
        "question": "picAgeRange",
        "lastUpdated": "2018-07-09T18:13:42.541",
        "info": null,
        "type": "SELECT"
      }
    ]
  },
  {
    "goal": [
      {
        "question": "goal",
        "lastUpdated": "2018-07-09T18:13:42.541",
        "info": null,
        "type": "SELECT"
      }
    ]
  },
  {
    "hairColor": [
      {
        "question": "hairColor",
        "lastUpdated": "2018-07-09T18:13:49.567",
        "info": null,
        "type": "SELECT"
      },
      {
        "question": "picHairColor",
        "lastUpdated": "2018-07-09T18:13:42.541",
        "info": null,
        "type": "SELECT"
      }
    ]
  }
]

    预期结果是 

    {
  "ageRange":[
    {
      "question":"ageRange",
      "lastUpdated":"2018-07-09T18:13:42.541",
      "info":null,
      "type":"SELECT"
    },
    {
      "question":"picAgeRange",
      "lastUpdated":"2018-07-09T18:13:42.541",
      "info":null,
      "type":"SELECT"
    }
  ],
  "goal":[
    {
      "question":"goal",
      "lastUpdated":"2018-07-09T18:13:42.541",
      "info":null,
      "type":"SELECT"
    }
  ],
  "hairColor":[
    {
      "question":"hairColor",
      "lastUpdated":"2018-07-09T18:13:49.567",
      "info":null,
      "type":"SELECT"
    },
    {
      "question":"picHairColor",
      "lastUpdated":"2018-07-09T18:13:42.541",
      "info":null,
      "type":"SELECT"
    }
  ]
}
    2 回复  |  直到 1 年前
        1
  •  3
  •   Fcmam5    1 年前

    Array.prototype.map() 返回一个数组,对于您的情况,如果我理解正确,您希望将元素分组并返回到一个results对象中。

    这似乎是可以实现的 Array.prototype.reduce() ,所以您会: 

    const ofQuestionsList = Object.entries(filterList).reduce(
  (acc, [questionKey, questionNames]) => {
    return {
      ...acc,
      [questionKey]: questionList.filter((item) =>
        questionNames.includes(item.question)
      )
    };
  }, {});

    这个reduce需要2个参数,一个回调需要 accumulator 和你的 current element 在您的数组中处理的。和 累加器 的初始化使用空对象 {} .

    然后在每次迭代中,我们返回一个合并的对象,其中包含迭代器的前一个值和当前值 

    console.clear();
const filterList = {
  ageRange: ["ageRange", "picAgeRange"],
  goal: ["goal", "motivation"],
  hairColor: ["hairColor", "picHairColor"]
};

const questionList = [{
    question: "ageRange",
    lastUpdated: "2018-07-09T18:13:42.541",
    info: null,
    type: "SELECT",
    answers: [{
        value: "18-30",
        selected: true
      },
      {
        value: "31-35",
        selected: false
      },
      {
        value: "36-45",
        selected: false
      },
      {
        value: "46-55",
        selected: false
      },
      {
        value: "55+",
        selected: false
      }
    ]
  },
  {
    question: "picAgeRange",
    lastUpdated: "2018-07-09T18:13:42.541",
    info: null,
    type: "SELECT",
    answers: [{
        value: "country 6",
        selected: true
      },
      {
        value: "smart casual 4",
        selected: false
      },
      {
        value: "dark denim 6",
        selected: false
      },
      {
        value: "sporty 6",
        selected: false
      },
      {
        value: "adventure 5",
        selected: false
      },
      {
        value: "prints 5",
        selected: false
      },
      {
        value: "excentric 5",
        selected: false
      },
      {
        value: "dont like any private style",
        selected: false
      }
    ]
  },
  {
    question: "goal",
    lastUpdated: "2018-07-09T18:13:42.541",
    info: null,
    type: "SELECT",
    answers: [{
        value: "save time",
        selected: true
      },
      {
        value: "personal advice",
        selected: false
      },
      {
        value: "inspiration",
        selected: false
      },
      {
        value: "testing the service",
        selected: false
      }
    ]
  },
  {
    question: "hairColor",
    lastUpdated: "2018-07-09T18:13:49.567",
    info: null,
    type: "SELECT",
    answers: [{
        value: "blond",
        selected: true
      },
      {
        value: "brown",
        selected: false
      },
      {
        value: "black",
        selected: false
      },
      {
        value: "red",
        selected: false
      },
      {
        value: "grey",
        selected: false
      },
      {
        value: "noHair",
        selected: false
      }
    ]
  },
  {
    question: "picHairColor",
    lastUpdated: "2018-07-09T18:13:42.541",
    info: null,
    type: "SELECT",
    answers: [{
        value: "suit 3",
        selected: true
      },
      {
        value: "business casual",
        selected: false
      },
      {
        value: "casual",
        selected: false
      },
      {
        value: "have to wear uniform",
        selected: false
      },
      {
        value: "classic",
        selected: false
      },
      {
        value: "conservative",
        selected: false
      },
      {
        value: "relaxed 2",
        selected: false
      },
      {
        value: "dont like any work style",
        selected: false
      }
    ]
  }
];

const ofQuestionsList = Object.entries(filterList).reduce(
  (acc, [questionKey, questionNames]) => {
    return {
      ...acc,
      [questionKey]: questionList.filter((item) =>
        questionNames.includes(item.question)
      )
    };
  }, {});

console.log(ofQuestionsList);
        2
  •  0
  •   Mo.    1 年前

    以结果管理 

    console.clear();
const result = [{
    ageRange: [{
        question: "ageRange",
        lastUpdated: "2018-07-09T18:13:42.541",
        info: null,
        type: "SELECT"
      },
      {
        question: "picAgeRange",
        lastUpdated: "2018-07-09T18:13:42.541",
        info: null,
        type: "SELECT"
      }
    ]
  },
  {
    goal: [{
      question: "goal",
      lastUpdated: "2018-07-09T18:13:42.541",
      info: null,
      type: "SELECT"
    }]
  },
  {
    hairColor: [{
        question: "hairColor",
        lastUpdated: "2018-07-09T18:13:49.567",
        info: null,
        type: "SELECT"
      },
      {
        question: "picHairColor",
        lastUpdated: "2018-07-09T18:13:42.541",
        info: null,
        type: "SELECT"
      }
    ]
  }
];

var newObj = result.reduce((a, b) => Object.assign(a, b), {})

console.log(newObj)
    推荐文章
    Udders  ·  使用另一个数组中的值按索引从数组中删除
    2 年前
    Matt  ·  获取数组长度并推入每个对象
    2 年前
    Rahmouni Rabii  ·  尝试访问数组中的对象时未定义
    2 年前
    Brian Patterson  ·  Javascript自定义数组。原型方法日志“未定义”
    2 年前
    dapidmini  ·  未捕获的承诺嵌套异步函数承诺错误处理
    2 年前
    Arka Bhattacharjee  ·  如何在JavaScript中反转大写的字符串?[重复]
    2 年前
    Zeeps Wear  ·  如何按键对对象进行分组?
    2 年前
    Kevin Giraldo  ·  如何更改字符串或数字在JavaScript中转换类的方式?
    2 年前
    Rachel  ·  如何按ID从JSON对象数组中删除数组元素
    2 年前
    minsu123  ·  如何解析react中的单个引用?
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号