Join two object arrays and display remaining values in 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"
}];

I'm trying to join using position key with two other object arrays(pdf_header and pdf_footer) and save the remaining object key values in pdf_header_output and pdf_footer_output respectively. If the value is not present in obj, then an empty object should push.

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

Expected Output:

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

I tried this, but didn't work as expected

score 2 · Accepted Answer · answered Dec 07 '21 at 13:33

You need to map over each item in pdf_header or pdf_footer and find the matching element in obj. Then extract all properties except the position one.

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" }];

Thanks. Can you please explain the code? – Hello Dec 07 '21 at 14:15 — Hello, Dec 07 '21 at 14:15

score 1 · Answer 2 · answered Dec 07 '21 at 13:56

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)

Michał Szymański · Answer 3 · 2021-12-07T14:25:23.547

If you can't use modern JS here is my solution:

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);

Join two object arrays and display remaining values in JavaScript

3 Answers3