How To Put The Value Of A Key In An Object In An Array Based On The Order Of Another Array With Plain Javascript

I have an array of values, which match the object keys in the object. The array of values has the order of which the key's values should be in based on the keys (which again, match

Solution 1:

You can map the keyArr to the Object.values of the associated object in payload, then flatten the array:

varPayload={BL_0GHahOV7Hb9l141:{questions0:"QID4",questions1:"QID17"},BL_0SuWoa7K2CkYFsV:{questions0:"QID39",questions1:"QID38"},BL_0r1ZjeAhMBEBhdz:{questions0:"QID9",questions1:"QID7",questions2:"QID12",questions3:"QID11"},BL_1Mk6LuLiukBnCU5:{questions0:"QID14"},BL_2lVBP4EOiOwT0Kp:{questions0:"QID30",questions1:"QID31"},BL_2tA1Ilad6iCEEu1:{questions0:"QID5",questions1:"QID18"},BL_4IMpxjrEATyLuqV:{questions0:"QID13"},BL_4NL909leoyn5KBf:{questions0:"QID44"},BL_4Yhl7MpygFG9Z6B:{questions0:"QID36"},BL_6ilSpb6iiCzWvtz:{questions0:"QID27",questions1:"QID24"},BL_9ESRPcpuMl5TNcx:{questions0:"QID45"},BL_a4faBNVnTi19wLr:{questions0:"QID29",questions1:"QID32"},BL_bBGbASH2RnPCskt:{questions0:"QID43",questions1:"QID42",questions2:"QID41",questions3:"QID40",questions4:"QID34"},BL_bBjaPeuYnHFtBBP:{questions0:"QID16",questions1:"QID15"},BL_cACgbdijKOAtRo9:{questions0:"QID46"},BL_eD0WiECJYD2l0nr:{questions0:"QID33"}};
var keyArr=["BL_4NL909leoyn5KBf","BL_bBGbASH2RnPCskt","BL_4Yhl7MpygFG9Z6B","BL_0GHahOV7Hb9l141","BL_3n1Vmp4FL6cZZuR","BL_9ESRPcpuMl5TNcx","BL_cACgbdijKOAtRo9","BL_0SuWoa7K2CkYFsV","BL_2tA1Ilad6iCEEu1","BL_0r1ZjeAhMBEBhdz","BL_6ilSpb6iiCzWvtz","BL_a4faBNVnTi19wLr","BL_2lVBP4EOiOwT0Kp","BL_4IMpxjrEATyLuqV","BL_bBjaPeuYnHFtBBP","BL_eD0WiECJYD2l0nr","BL_1Mk6LuLiukBnCU5"]

const output = keyArr
  .map(key =>Object.values(Payload[key] || {}))
  .flat();
console.log(output);

Another approach without the new method flat would be to reduce into the output array instead:

varPayload={BL_0GHahOV7Hb9l141:{questions0:"QID4",questions1:"QID17"},BL_0SuWoa7K2CkYFsV:{questions0:"QID39",questions1:"QID38"},BL_0r1ZjeAhMBEBhdz:{questions0:"QID9",questions1:"QID7",questions2:"QID12",questions3:"QID11"},BL_1Mk6LuLiukBnCU5:{questions0:"QID14"},BL_2lVBP4EOiOwT0Kp:{questions0:"QID30",questions1:"QID31"},BL_2tA1Ilad6iCEEu1:{questions0:"QID5",questions1:"QID18"},BL_4IMpxjrEATyLuqV:{questions0:"QID13"},BL_4NL909leoyn5KBf:{questions0:"QID44"},BL_4Yhl7MpygFG9Z6B:{questions0:"QID36"},BL_6ilSpb6iiCzWvtz:{questions0:"QID27",questions1:"QID24"},BL_9ESRPcpuMl5TNcx:{questions0:"QID45"},BL_a4faBNVnTi19wLr:{questions0:"QID29",questions1:"QID32"},BL_bBGbASH2RnPCskt:{questions0:"QID43",questions1:"QID42",questions2:"QID41",questions3:"QID40",questions4:"QID34"},BL_bBjaPeuYnHFtBBP:{questions0:"QID16",questions1:"QID15"},BL_cACgbdijKOAtRo9:{questions0:"QID46"},BL_eD0WiECJYD2l0nr:{questions0:"QID33"}};
var keyArr=["BL_4NL909leoyn5KBf","BL_bBGbASH2RnPCskt","BL_4Yhl7MpygFG9Z6B","BL_0GHahOV7Hb9l141","BL_3n1Vmp4FL6cZZuR","BL_9ESRPcpuMl5TNcx","BL_cACgbdijKOAtRo9","BL_0SuWoa7K2CkYFsV","BL_2tA1Ilad6iCEEu1","BL_0r1ZjeAhMBEBhdz","BL_6ilSpb6iiCzWvtz","BL_a4faBNVnTi19wLr","BL_2lVBP4EOiOwT0Kp","BL_4IMpxjrEATyLuqV","BL_bBjaPeuYnHFtBBP","BL_eD0WiECJYD2l0nr","BL_1Mk6LuLiukBnCU5"]

const output = keyArr.reduce((a, key) => {
  if (Payload[key]) {
    a.push(...Object.values(Payload[key]));
  }
  return a;
}, []);
console.log(output);

Or, if you're running an ancient browser that doesn't support ES2015, you can concat:

varPayload={BL_0GHahOV7Hb9l141:{questions0:"QID4",questions1:"QID17"},BL_0SuWoa7K2CkYFsV:{questions0:"QID39",questions1:"QID38"},BL_0r1ZjeAhMBEBhdz:{questions0:"QID9",questions1:"QID7",questions2:"QID12",questions3:"QID11"},BL_1Mk6LuLiukBnCU5:{questions0:"QID14"},BL_2lVBP4EOiOwT0Kp:{questions0:"QID30",questions1:"QID31"},BL_2tA1Ilad6iCEEu1:{questions0:"QID5",questions1:"QID18"},BL_4IMpxjrEATyLuqV:{questions0:"QID13"},BL_4NL909leoyn5KBf:{questions0:"QID44"},BL_4Yhl7MpygFG9Z6B:{questions0:"QID36"},BL_6ilSpb6iiCzWvtz:{questions0:"QID27",questions1:"QID24"},BL_9ESRPcpuMl5TNcx:{questions0:"QID45"},BL_a4faBNVnTi19wLr:{questions0:"QID29",questions1:"QID32"},BL_bBGbASH2RnPCskt:{questions0:"QID43",questions1:"QID42",questions2:"QID41",questions3:"QID40",questions4:"QID34"},BL_bBjaPeuYnHFtBBP:{questions0:"QID16",questions1:"QID15"},BL_cACgbdijKOAtRo9:{questions0:"QID46"},BL_eD0WiECJYD2l0nr:{questions0:"QID33"}};
var keyArr=["BL_4NL909leoyn5KBf","BL_bBGbASH2RnPCskt","BL_4Yhl7MpygFG9Z6B","BL_0GHahOV7Hb9l141","BL_3n1Vmp4FL6cZZuR","BL_9ESRPcpuMl5TNcx","BL_cACgbdijKOAtRo9","BL_0SuWoa7K2CkYFsV","BL_2tA1Ilad6iCEEu1","BL_0r1ZjeAhMBEBhdz","BL_6ilSpb6iiCzWvtz","BL_a4faBNVnTi19wLr","BL_2lVBP4EOiOwT0Kp","BL_4IMpxjrEATyLuqV","BL_bBjaPeuYnHFtBBP","BL_eD0WiECJYD2l0nr","BL_1Mk6LuLiukBnCU5"]

var output = keyArr.reduce(function(a, key) {
  if (Payload[key]) {
    return a.concat(Object.values(Payload[key]));
  }
  return a;
}, []);
console.log(output);