加入兩個物件陣列并在JavaScript中顯示剩余值

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

我正在嘗試使用positionkey 與其他兩個物件陣列（pdf_header和pdf_footer）連接，pdf_header_output并pdf_footer_output分別將剩余的物件鍵值保存在和 中。如果該值不存在于 中obj，則應推送一個空物件。

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 = [{
    text: "9"
}, {
    image: logo,
    width: 22
}, {}];
var pdf_footer_output = [{
    text: "2"
}, {}, {
    text: "1"
}];

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

uj5u.com熱心網友回復：

您需要映射pdf_header或 中的每個專案pdf_footer并在 中找到匹配的元素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" }];

uj5u.com熱心網友回復：

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)

uj5u.com熱心網友回復：

如果您不能使用現代 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);

標籤：javascript 目的

上一篇：我嘗試在一個物件內推送一個值，每次我切換到另一個輸入標簽時它總是顯示未定義

下一篇：通過匹配項將物件陣列中的鍵/值移動到其他陣列