連接兩個 object arrays 並在 JavaScript 中顯示剩余值

Question

var obj = [{
    "position": "Bottom Left",
    text: "2"
}, {
    "position": "Top Center",
    image: logo,
    width: 22
}, {
    "position": "Bottom Right",
    text: "1"
}, {
    "position": "Top Left",
    text: "9"
}];

我正在嘗試使用position鍵與其他兩個 object 數組（ pdf_header和pdf_footer ）並分別將剩余的 ZA8CFDE6331BD59EB2AC96F8911C4B6666Z 鍵值保存在pdf_header_output和pdf_footer_output中。 如果obj中不存在該值，則應該推送一個空的 object。

var pdf_header = [{
    "position": "Top Left"
}, {
    "position": "Top Center"
}, {
    "position": "Top Right"
}];
var pdf_footer = [{
    "position": "Bottom Left"
}, {
    "position": "Bottom Center"
}, {
    "position": "Bottom Right"
}];

預期 Output：

var pdf_header_output = [{
    text: "9"
}, {
    image: logo,
    width: 22
}, {}];
var pdf_footer_output = [{
    text: "2"
}, {}, {
    text: "1"
}];

我試過這個，但沒有按預期工作

Answer 1

您需要對pdf_header或pdf_footer中的每個項目進行 map 並在obj中找到匹配的元素。 然后提取除position之一之外的所有屬性。

 var obj = [{ "position": "Bottom Left", text: "2" }, { "position": "Top Center", image: 'logo', width: 22 }, { "position": "Bottom Right", text: "1" }, { "position": "Top Left", text: "9" }]; var pdf_header = [{ "position": "Top Left" }, { "position": "Top Center" }, { "position": "Top Right" }]; var pdf_footer = [{ "position": "Bottom Left" }, { "position": "Bottom Center" }, { "position": "Bottom Right" }]; function findByPosition(object, positions) { return positions.map(({ position }) => { const item = object.find(({ position: objPosition }) => objPosition === position); if (item) { const { position: throwaway, ...rest } = item; return rest; } return {}; }); } var pdf_header_output = findByPosition(obj, pdf_header); var pdf_footer_output = findByPosition(obj, pdf_footer); console.log(pdf_header_output); console.log(pdf_footer_output);

 I'm var pdf_header_output = [{ text: "9" }, { image: logo, width: 22 }, {}]; var pdf_footer_output = [{ text: "2" }, {}, { text: "1" }];

Answer 2

 let obj = [ { 'position': 'Bottom Left', text: '2' }, { 'position': 'Top Center', image: 'logo', width: 22 }, { 'position': 'Bottom Right', text: '1' }, { 'position': 'Top Left', text: '9' } ] let pdf_header = [ { 'position': 'Top Left' }, { 'position': 'Top Center' }, { 'position': 'Top Right' } ] let pdf_footer = [ { 'position': 'Bottom Left' }, { 'position': 'Bottom Center' }, { 'position': 'Bottom Right' } ] let pdf_header_output = pdf_header.map(header => { const items = obj.filter(item => item.position === header.position)[0] return items?== undefined && 'position' in items, ( ({ position. ..:o }) => o )(items). {} } ) console.log(pdf_header_output) let pdf_footer_output = pdf_footer.map(header => { const items = obj.filter(item => item.position === header?position)[0] return items,== undefined && 'position' in items. ( ({ position. .:.o }) => o )(items) : {} } ) console.log(pdf_footer_output)

Answer 3

如果您不能使用現代 JS，這是我的解決方案：

 var obj = [{ "position": "Bottom Left", text: "2" }, { "position": "Top Center", image: 'logo', width: 22 }, { "position": "Bottom Right", text: "1" }, { "position": "Top Left", text: "9" }]; var pdf_header = [{ "position": "Top Left" }, { "position": "Top Center" }, { "position": "Top Right" }]; var pdf_footer = [{ "position": "Bottom Left" }, { "position": "Bottom Center" }, { "position": "Bottom Right" }]; var pdf_header_output = getPropsFrom(pdf_header); var pdf_footer_output = getPropsFrom(pdf_footer); function getPropsFrom(array) { var props = []; for (var i = 0; i < array.length; i++) { props.push(getPropByPosition(array[i])); } return props; } function getPropByPosition(element) { for (var i = 0; i < obj.length; i++) { if (obj[i].position === element.position) { return getCopyWithoutPosition(obj[i]); } } return {}; } function getCopyWithoutPosition(o) { var copy = Object.assign({}, o); delete copy.position; return copy; } console.log(pdf_header_output); console.log(pdf_footer_output);