javascript - how to put the value of a key in an object in an array based on the order of another array with plain javascript

Question

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 the array's values). I need to order the values of the keys based of the order of the blocks in the array.

Here is the Object:

var Payload = { 
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"}
}

Here is the Array:

 var Array =  ["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"]

Notice that the array values match the object keys. The objects values should be in the same order of the arrays values so that they values are in the correct order.

I have tried the following, but I just end of with an array of the blocks again.

var ArrayOfQuestionOrder = []
for( i=0;i<Array.length;i++){

    if(Payload.hasOwnProperty(Array[i])){
        var objectKeys = Object.keys(Payload)
        var index = objectKeys.indexOf(Array[i])
        var OrderOfKeys = Object.keys(Payload)[index]
        ArrayOfQuestionOrder.push(OrderOfKeys);

    }

}console.log(ArrayOfQuestionOrder)  

The expected output would be

["QID44","QID43","QID42",...]

标签： javascriptarraysobject

Answer 1

您可以map对keyArr中Object.values的关联对象payload，然后展平数组：

var Payload={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);

没有新方法的另一种方法flat是reduce进入输出数组：

var Payload={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);

或者，如果您运行的是不支持 ES2015 的古老浏览器，您可以concat：

var Payload={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);