Merge 2 arrays into 1 array and filter this merged array,

Question

So I have 2 arrays of objects: planned, backlog.

    const planned = [
     {
      order_number: "1",
      part_name: "example",
      part_number: "1",
      process_id: 1
     },
     ....
    ];
    const backlog = [
     {
      order_number: "2",
      part_name: "example",
      part_number: "2",
      process_id: 2
     },
     ....
    ];

I am trying to filter both of them at the same time, each one individually that's not a problem.

So what I am actually doing is first adding key of planned to planned array and backlog to backlog array in order to know later from where the order originally came from.

var newPlanned = planned.map(function (el) {
  var o = Object.assign({}, el);
  o.planned = true;
  return o;
});

var newBacklog = backlog.map(function (el) {
  var o = Object.assign({}, el);
  o.backlog = true;
  return o;
});

Later I am merging the 2 arrays into 1 array, and filtering the merged array with one input onChange, but what I can't achieve is to render the "planned" and "backlog" arrays separately from the new merged array.

const newPlannedAndBacklog = [...newBacklog, ...newPlanned];

Link to codeSandBox: SandBox

Good, now it would help to see how you're trying to render the array and where it fails. — Emile Bergeron
– Emile Bergeron, Commented Sep 29, 2020 at 19:03

Ross Sheppard · Accepted Answer · 2020-09-30 05:39:13Z

1

I added a type instead of a boolean property for several types. This may be more scalable so you can add more types (refined, done, etc.), but let me know if you'd like the boolean property.

const combinedList = [
  ...planned.map((item) => ({ ...item, type: 'planned' })),
  ...backlog.map((item) => ({ ...item, type: 'backlog' })),
];

const getFilteredList = (type) => combinedList.filter((item) => item.type === type);

UPDATE

I believe this is the behavior you want. Let me know if not and I'll update the answer.

// Combines all backlog and planned stories into one array
const newPlannedAndBacklog = [
  ...planned.map((item) => ({ ...item, type: 'planned' })),
  ...backlog.map((item) => ({ ...item, type: 'backlog' })),
];

// Filters property values based on input value
const getFilteredList = (filter) => newPlannedAndBacklog
  .filter(item => Object
    .values(item)
    .map(String)
    .some(v => v.includes(filter))
  );

export default function App() {
  const [form, setForm] = useState({});
  const [stories, setStories] = useState([]);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setForm({ [name]: value });
    setStories(getFilteredList(value));
  };

  // Separates the return of getfilteredList based on type
  const renderDiv = (type) => stories
    .filter((story) => story.type === type)
    .map((story) => {

      // Render each property individually:
      return Object.entries(story).map(([key, value]) => {
        const content = <>{key}: {value}</>;

        if (key === 'order_number') return <h3>{content}</h3>;
        return <p>{content}</p>;
      });
  });

  return (
    <div className="App">
      <h2>PlannedAndBacklog</h2>
      <p>Search for planned and backlog:</p>
      <input
        name='type'
        onChange={handleChange}
        value={form.type || ''}
      />
      <div>{renderDiv('backlog')}</div>
      <div>{renderDiv('planned')}</div>
    </div>
  );
};

edited Sep 30, 2020 at 5:39

answered Sep 29, 2020 at 19:04

Ross Sheppard

8701 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AdirD Over a year ago

Thanks for your comment, how can I filter the combinedList with one input with onChange and show it in 2 speared divs?

Ross Sheppard Over a year ago

Are you trying to search on all of the item properties? In other words, do you want to search for example and have all of the items still show up?

Collectives™ on Stack Overflow

Merge 2 arrays into 1 array and filter this merged array,

1 Answer 1

UPDATE

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related