using .join() based on condition in Javascript

Question

I am trying to loop through the components array and join all the tire component descriptions with a comma (, ) if there are multiple.

let dataForTemplate = {};
incident = {
  complaint_id: 55556473,
  components: [{
      component_id: 263,
      name: 'SEAT BELTS',
      description: '150000 SEAT BELTS',
      is_public: true,
      is_vehicle: true,
      is_equipment: false,
      is_tire: false,
      is_child_seat: false,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 1
    },
    {
      component_id: 300,
      name: 'TIRES',
      description: '190000 TIRES',
      is_public: true,
      is_vehicle: true,
      is_equipment: false,
      is_tire: true,
      is_child_seat: false,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 17
    },
    {
      component_id: 1025,
      name: 'CHILD SEAT:VEHICLE TETHER ANCHOR',
      description: '532000 CHILD SEAT:VEHICLE TETHER ANCHOR',
      is_public: true,
      is_vehicle: false,
      is_equipment: false,
      is_tire: false,
      is_child_seat: true,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 4
    }
  ]
};

Here is what I am trying:

if (incident.components && incident.components.length > 0) {
  dataForTemplate.tire_components = incident.components.map((e) => {
    console.log(e);
    if (e.is_tire) {
      return ${e.description};
    }
  }).join(' ,');
}

console.log(dataForTemplate);

Current output: {tire_components: " ,190000 TIRES ,"}

Expected output: {tire_components: "190000 TIRES"}

It should only join string with comma if there are multiple descriptions satisfying the condition.

could be as easy as just replacing all occurrences of : with ,? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Andrew L
– Andrew L, Commented Feb 4, 2020 at 18:54
The reason this doesn't work is that after your map call, you have an array of results, ["", "190000 TIRES", ""]. You want to filter first to include only the relevant ones. — Scott Sauyet
– Scott Sauyet, Commented Feb 4, 2020 at 19:07

Taki · Accepted Answer · 2020-02-04 18:54:59Z

Filter the array to get the is_tire entries, map tehm to get the description and join the result :

let dataForTemplate = {};
incident = {
  complaint_id: 55556473,
  components: [
    {
      component_id: 263,
      name: "SEAT BELTS",
      description: "150000 SEAT BELTS",
      is_public: true,
      is_vehicle: true,
      is_equipment: false,
      is_tire: false,
      is_child_seat: false,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 1
    },
    {
      component_id: 300,
      name: "TIRES",
      description: "190000 TIRES",
      is_public: true,
      is_vehicle: true,
      is_equipment: false,
      is_tire: true,
      is_child_seat: false,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 17
    },
    {
      component_id: 1025,
      name: "CHILD SEAT:VEHICLE TETHER ANCHOR",
      description: "532000 CHILD SEAT:VEHICLE TETHER ANCHOR",
      is_public: true,
      is_vehicle: false,
      is_equipment: false,
      is_tire: false,
      is_child_seat: true,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 4
    }
  ]
};

if (incident.components && incident.components.length > 0) {
  dataForTemplate.tire_components = incident.components
    .filter(e => e.is_tire)
    .map(e => {
      return `${e.description}`;
    })
    .join(" ,");
}

console.log(dataForTemplate);

let dataForTemplate = {};
incident = {
  complaint_id: 55556473,
  components: [
    {
      component_id: 263,
      name: "SEAT BELTS",
      description: "150000 SEAT BELTS",
      is_public: true,
      is_vehicle: true,
      is_equipment: false,
      is_tire: false,
      is_child_seat: false,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 1
    },
    {
      component_id: 300,
      name: "TIRES",
      description: "190000 TIRES",
      is_public: true,
      is_vehicle: true,
      is_equipment: false,
      is_tire: true,
      is_child_seat: false,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 17
    },
    {
      component_id: 300,
      name: "TIRES",
      description: "190000 TIRES example 2",
      is_public: true,
      is_vehicle: true,
      is_equipment: false,
      is_tire: true,
      is_child_seat: false,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 17
    },
    {
      component_id: 1025,
      name: "CHILD SEAT:VEHICLE TETHER ANCHOR",
      description: "532000 CHILD SEAT:VEHICLE TETHER ANCHOR",
      is_public: true,
      is_vehicle: false,
      is_equipment: false,
      is_tire: false,
      is_child_seat: true,
      is_active: true,
      is_deleted: false,
      risk_matrix_default_id: 4
    }
  ]
};

if (incident.components && incident.components.length > 0) {
  dataForTemplate.tire_components = incident.components
    .filter(e => e.is_tire)
    .map(e => {
      return `${e.description}`;
    })
    .join(" ,");
}

console.log(dataForTemplate);

@JakeHolzinger i agree, but it was there in the OP's question and it's unrelated to the problem so i didn't change it.

Scott Sauyet · Accepted Answer · 2020-02-04 19:01:21Z

Array.prototype.join already does what you want, so it's just a matter of selecting the right data and calling .join (', '). Here's one technique:

const tireComponentDescriptions = (incident) =>
  ((incident || {}) .components || [])
    .filter (i => i .is_tire)
    .map (i => i.description)
    .join (', ')
  

const incident = {complaint_id: 55556473, components: [{component_id: 263, name: "SEAT BELTS", description: "150000 SEAT BELTS", is_public: true, is_vehicle: true, is_equipment: false, is_tire: false, is_child_seat: false, is_active: true, is_deleted: false, risk_matrix_default_id: 1}, {component_id: 300, name: "TIRES", description: "190000 TIRES", is_public: true, is_vehicle: true, is_equipment: false, is_tire: true, is_child_seat: false, is_active: true, is_deleted: false, risk_matrix_default_id: 17}, {component_id: 1025, name: "CHILD SEAT: VEHICLE TETHER ANCHOR", description: "532000 CHILD SEAT: VEHICLE TETHER ANCHOR", is_public: true, is_vehicle: false, is_equipment: false, is_tire: false, is_child_seat: true, is_active: true, is_deleted: false, risk_matrix_default_id: 4}]};

console .log (tireComponentDescriptions (incident))

incident .components [0] .is_tire = true
console .log (tireComponentDescriptions (incident))

incident .components [2] .is_tire = true
console .log (tireComponentDescriptions (incident))

Michael · Accepted Answer · 2020-02-04 18:53:12Z

0

filter through the components, map to the description and join the resulting array afterwards components.filter(component => component.is_tire).map(component => component.description).join(', ')

answered Feb 4, 2020 at 18:53

Michael

9588 silver badges19 bronze badges

Comments

Jordan Burnett · Accepted Answer · 2020-02-04 18:55:09Z

0

Array.map always returns an array of the same length, so will contain undefined values in your example. You could use Array.filter to first filter out any values you don't want before using join

if (incident.components && incident.components.length > 0) {
    dataForTemplate.tire_components = incident.components.filter(e => e.is_tire).map(e => e.description).join(' ,');
}

You could also use Array.reduce to filter and map at the same time.

if (incident.components && incident.components.length > 0) {
    dataForTemplate.tire_components = incident.components.reduce((output, e) => {
      if(e.is_tire) { 
        output.push(e.description) 
      } 
      return output
    }, []).join(' ,');
}

answered Feb 4, 2020 at 18:55

Jordan Burnett

1,85410 silver badges11 bronze badges

Comments

Nina Scholz · Accepted Answer · 2020-02-04 18:55:34Z

You could filter in advance and then map the wanted property.

let dataForTemplate = {},
    incident = { complaint_id: 55556473, components: [{ component_id: 263, name: "SEAT BELTS", description: "150000 SEAT BELTS", is_public: true, is_vehicle: true, is_equipment: false, is_tire: false, is_child_seat: false, is_active: true, is_deleted: false, risk_matrix_default_id: 1 }, { component_id: 300, name: "TIRES", description: "190000 TIRES", is_public: true, is_vehicle: true, is_equipment: false, is_tire: true, is_child_seat: false, is_active: true, is_deleted: false, risk_matrix_default_id: 17 }, { component_id: 1025, name: "CHILD SEAT:VEHICLE TETHER ANCHOR", description: "532000 CHILD SEAT:VEHICLE TETHER ANCHOR", is_public: true, is_vehicle: false, is_equipment: false, is_tire: false, is_child_seat: true, is_active: true, is_deleted: false, risk_matrix_default_id: 4 }] };

if (incident.components && incident.components.length > 0) {
    dataForTemplate.tire_components = incident.components
        .filter(({ is_tire }) => is_tire)
        .map(({ description }) => description)
        .join(' ,');
}

console.log(dataForTemplate);

Collectives™ on Stack Overflow

using .join() based on condition in Javascript

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related