Vue.js computed properties, filter by object key

Question

I'm working with an object containing multiple network interfaces with the interfaces' names as keys and then interfaces' informations as values :

What I would like to do is a Vue.js computed property to filter this object by Keys and create arrays that contain all GigabitEthernet separately for example so I can iterate over it in my template.

I thinked about using Regex, here is the one that I use and match the interfaces I want to put in a separate array :

const regex = /^(Te|GigabitEthernet|FastEthernet)+\s?([0-9]+\/){0,}[0-9]+$/g;

The problem is that the main object received from API isn't an array so I can't use find() or filter() functions over it...

If anyone as any idea it would be nice, thanks !

EDIT :

After trying Jaromanda's solution :

It returns only 1 line out of 2...

Here is the code :

const regex = /^(Ten|GigabitEthernet|FastEthernet)\d+[/]?[\d+]?[/]?[\d+]?[.]?[\d+]?[/]?[\d+]?[/]?[\d+]?[:]?[\d+]?$/g;
      var rslt = {};
      Object.fromEntries(
        Object.entries(this.cmdResult).filter(([key, value]) => {
          if (regex.test(key)) {
            rslt[key] = value;
          }
        })
      );
      return rslt;

Here is a screenshot of current output at the left and expected output at the right :

EDIT 2 :

Here is what happens when I console log the regex results with the associated key :

As you can see only 1 out of 2 is true...

use Object.fromEntries(Object.entries(object).filter(([key, value]) => your code to filter)) — Jaromanda X
– Jaromanda X, Commented Oct 22, 2020 at 9:40
It's working but there's only 1 problem, it returns only 1 line out of 2, can you check my edit please? — ryuzak1
– ryuzak1, Commented Oct 22, 2020 at 11:54
test will advance the lastIndex property of the regex when used with the global flag (g). For this reason the next match fails, because it starts of too far into the string to find a match. Either remove the g flag from the regex, create a new regex for each test or reset the lastIndex property to 0 before each test. — 3limin4t0r
– 3limin4t0r, Commented Oct 22, 2020 at 12:39

lissettdm · Accepted Answer · 2020-10-22 12:39:07Z

1

This is other solution, using map.

const cmdResult = {
  "GigabitEthernet1/0/2": {name: ""},
  "GigabitEthernet1/0/3": {name: ""},
  "GigabitEthernet1/0/4": {name: ""}


}
const regex = /(GigabitEthernet||FastEthernet\d+(\.\d)*)/i;
const rslt = {};
Object.keys(cmdResult)
  .filter((key) => regex.test(key))
  .map(prop => rslt[prop] = cmdResult[prop])
    
console.log(rslt);

edited Oct 22, 2020 at 12:39

answered Oct 22, 2020 at 12:19

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

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

5 Comments

ryuzak1 Over a year ago

It's still not working... Can you please check my last edit, I added a screenshot, it's really strange, even in your code snippet GigabitEthernet1/0/3 is missing...

lissettdm Over a year ago

@ryuzak1, Ok, the problem is with the regex pattern. What do you want to filter, props that contains GigabitEthernet, FastEthernet..???

ryuzak1 Over a year ago

Yes, in this case FastEthernet, GigabitEthernet, In other words i don't want the last two Vlan to be in the result, but what's weird here is when I test the regex with an online regex tester, the keys that returned false in my code are working with the tester

lissettdm Over a year ago

@ryuzak1, check the new regex pattern.

ryuzak1 Over a year ago

Thanks ! I just replaced g by i at the end of the regex as 3limin4t0r mentionned and it's now working

Collectives™ on Stack Overflow

Vue.js computed properties, filter by object key

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related