Stripping out part of array value in Javascript

Question

I have an array that I'm currently breaking down with the map function in order to only get the option index of the original array. This works, but now I'm wanting to strip this down and only get the first 2 numerical digits from that option index (or more specifically, anything in front of the '-' in that value)

What's the best way to strip out only those digits while mapping it the way I currently am?

var vm = 
new Vue({
  el: "#app",
  data: {
    options: [
      {id:100, option:"1 - John Doe"},
      {id:200, option:"2 - Jane Doe"}
    ]
  },
  methods: {
    getNames(){
      
      let names = this.options.map(option => {
        return {
          id: option.option
        }
      });
      
      console.log(names);
    }
  }
  
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="getNames()">TEST</button>
</div>

Welcome to SO! What did you try? Please give an minimal reproducible example (for the code you tried and the wanted example). — hc_dev
– hc_dev, Commented Feb 3, 2022 at 6:18
Please clarify: (a) Should the array keep its nested structure (i.e. objects containing only id property) ? (b) Should the returned number be of type String or Number ? — hc_dev
– hc_dev, Commented Feb 3, 2022 at 7:00

hc_dev · Accepted Answer · 2022-02-03 06:56:13Z

1

Pure JavaScript to Return only numbers from string.

Example for returned array:

[
  {id: "1"},
  {id: "2"}
]

Solution

Use replace with a regex to remove any non-numeric from the string - return only numbers (as string).

The regex is applied to all occurrences using the global flag behind surrounding slashes //g. The pattern inside slashes can be any of those equivalents to keep the numerical digits only:

\D matches all non-number characters (meta-character)
[^0-9] matches all non-number characters (inversed character-range)

Demo:

let options =  [
  {id:100, option:"1 - John Doe"},
  {id:200, option:"2 - Jane Doe"}
];

// keep only the first digits before hyphen
let names = options.map(o => {
    return {id: o.option.replace(/[^0-9]/g, "")};
});

console.log(names);

edited Feb 3, 2022 at 6:56

answered Feb 3, 2022 at 6:29

hc_dev

9,6941 gold badge30 silver badges47 bronze badges

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

1 Comment

Geoff_S Over a year ago

This works great, thanks! I had previously tried a method from a vue regex library but I think it was overcomplicating things

2pichar · Accepted Answer · 2022-02-03 02:30:29Z

1

You can edit your map callback to get the first part of the string:

let options =  [
  {id:100, option:"1 - John Doe"},
  {id:200, option:"2 - Jane Doe"}
];

let names = options.map(option => {
    let opt = option.option;
    id = opt.split(' - ')[0];
    return { id };
});

console.log(names);

answered Feb 3, 2022 at 2:30

2pichar

1,3788 silver badges20 bronze badges

Comments

Rodolfo BocaneGra · Accepted Answer · 2022-02-03 02:30:01Z

0

const names = this.options.map(option => {
    const text = option.option // Get raw text from 'option'
    const parts = text.split('-') // Split text string by the '-' (returns an array, E.g. ["1 ", " John Doe"])
    return parts[0] // The first element of 'parts' is the result you are looking for (note it is a string, not a number)
})

answered Feb 3, 2022 at 2:30

Rodolfo BocaneGra

3578 silver badges23 bronze badges

Comments

TechySharnav · Accepted Answer · 2022-02-03 07:07:29Z

0

You can use split method of string to split the string by " - " and get 1st part(the numerical digits). Additionally, you can use parseInt function, to convert string to integers.

var vm = 
new Vue({
  el: "#app",
  data: {
    options: [
      {id:100, option:"1 - John Doe"},
      {id:200, option:"2 - Jane Doe"}
    ]
  },
  methods: {
    getNames(){
      
      let names = this.options.map(option => {
        return {
          id: parseInt(option.option.split(" - "))
        }
      });
      
      console.log(names);
    }
  }
  
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="getNames()">TEST</button>
</div>

answered Feb 3, 2022 at 7:07

TechySharnav

5,1142 gold badges13 silver badges29 bronze badges

Collectives™ on Stack Overflow

Stripping out part of array value in Javascript

4 Answers 4

Solution

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Solution

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related