JavaScript data parsing - How to organize and filter matching key-value pairs

I’m working on a data processing task where I need to filter and organize information from arrays. I have two arrays - one with field names and another with corresponding values. The position in each array matches up.

My goal is to extract only specific fields from the data and group them properly. I want to keep only these 7 fields: “Service Info, Service Name, Extras, Package, Page Count, Format Type, File Upload” and ignore everything else.

Here’s what my data looks like:

Field Names Array: Service Info,Service Name,Extras,Package,Page Count,Format Type,_system_data,_item_id,_primary_key,File Upload,_item_id,_primary_key,_item_id,_system_data,Format Type,Page Count,Package,Extras,Service Name,Service Info,Service Info,Service Name,Extras,Package,Page Count,Format Type,_system_data,_item_id,_primary_key,File Upload,_item_id

Values Array: Document Info 3,Document Name 3,Premium Design - $49.00,Basic Plan,Regular 5K - $200.00,PDF Format,Begin~~//cdn.example.com/img/doc1.jpg~~begin,begin1234567890123,1,example.com/upload1.pdf,begin1234567890123,1,begin1234567889012,Begin~~//cdn.example.com/img/doc2.jpg~~begin,Advanced Format,Pro 10K - $350.00,Standard Plan,No Extras,Document Name 2,Document Info 2,First Document Info,First Document Name,No Extras,Premium Plan - $69.00,Extended 15K - $480.00,PDF Format,Begin~~//cdn.example.com/img/doc3.jpg~~begin,begin1234567888901,1,example.com/upload2.pdf,begin1234567888901

I need help creating JavaScript code that will match these keys with their values and organize them into groups. Each group should contain all instances of the same field type across different records.

Can someone show me how to accomplish this data transformation?

The tricky part is keeping field names aligned with their values while filtering out stuff you don’t need. I’ve dealt with this before when parsing CSV data - using a Map works way better than basic object grouping.

const fieldArray = fieldNamesString.split(',');
const valueArray = valuesString.split(',');
const targetFields = new Set(['Service Info', 'Service Name', 'Extras', 'Package', 'Page Count', 'Format Type', 'File Upload']);

const result = new Map();
fieldArray.forEach((field, idx) => {
  if (targetFields.has(field)) {
    if (!result.has(field)) result.set(field, []);
    result.get(field).push(valueArray[idx]);
  }
});

const finalOutput = Object.fromEntries(result);

Set makes field lookups faster, and Map keeps insertion order intact (which matters for data consistency). This handles duplicate field names automatically and won’t drop any matching values during transformation.

Split both arrays, zip them with indices, filter for your target fields, then group by field name with reduce.

const fieldNames = fieldNamesString.split(',');
const values = valuesString.split(',');
const targetFields = ['Service Info', 'Service Name', 'Extras', 'Package', 'Page Count', 'Format Type', 'File Upload'];

const grouped = fieldNames.reduce((acc, field, index) => {
  if (targetFields.includes(field)) {
    if (!acc[field]) acc[field] = [];
    acc[field].push(values[index]);
  }
  return acc;
}, {});

This handles duplicates automatically - it collects all values for each field type into arrays. You’ll get an object where each property contains every instance of that field from your data.

merge the arrays first, then filter what u need. use map() with indices to build objects, then filter by your fields array: fields.map((f, i) => ({field: f, value: vals[i]})).filter(item => allowedFields.includes(item.field)). just heads up - duplicates could be tricky to handle.