JavaScript .map using multiple array sources

Question

I have a test that provides 4 values:

fPortTotal = a number with how many ports in a firewall test.

fProtocol = an array with what protocol the port is (ex. UDP, TCP)

fPorts = an array with what port number

fStatus = an array with open or closed depending on the port

in all the arrays [0] is the first port, [1] is the 2nd, and so on. I want to use the .map method to display each port's information in a <p>. The issue is I'm having a large amount of difficulty understanding the .map method and how to use it. I beleave the "skeleton" of the function should look like this:

function populateFw(fPorts, fStatus, fPortTotal, fProtocol) {
    var output = document.getElementById('firewallRes');
    var text = document.createElement ('p');
    text.id = 'firewallEndResults';
    text.innerHTML = arrayOfArrays.map;
}

any help would be appreciated.

Having separate arrays is what's making this difficult. Why not have one array of objects like [{ fPort: 80, fProtocol: "TCP", fStatus: "Open" }, ...]? — Phil
– Phil, Commented Sep 29, 2020 at 23:33
.map callback function gets an index as the second argument, so you could do something like fPorts.map((fport, index) => doSomething(fport, fStatus[index], fPortTotal[index], fProtocol[index]) - what you do in doSomething is up to you — Jaromanda X
– Jaromanda X, Commented Sep 29, 2020 at 23:36
@phil the program that is provided to me is what is causing the separate arrays, i have no control over it, unfortunately. — mastaSabin
– mastaSabin, Commented Sep 29, 2020 at 23:44

Talmacel Marian Silviu · Accepted Answer · 2020-09-29 23:41:27Z

3

You can try something like this:

function populateFw(fPorts, fStatus, fPortTotal, fProtocol) {
    var output = document.getElementById('firewallRes');
    fPorts.forEach((port, index) => {
       const text = document.createElement('p');
       text.innerText= `${port}: ${fProtocol[index]} - ${fStatus[index]}`;
       output.appendChild(text);
    })
}

answered Sep 29, 2020 at 23:41

Talmacel Marian Silviu

1,7762 gold badges10 silver badges15 bronze badges

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

5 Comments

mastaSabin Over a year ago

my inexperienced eyes tell me this is using Jquery?

Talmacel Marian Silviu Over a year ago

no jquery...the dollars signs you see there is cause I am using template literals for the strings. look it up :)

mastaSabin Over a year ago

ok, thank you, everybody. this is probably enough for me to go on.

mastaSabin Over a year ago

@Talmachel Marian Silviu currently im trying to change the printed value of each fStatus value from 1/0 to open/closed and colored text. do you have a suggestion on how i can do this?

Talmacel Marian Silviu Over a year ago

to change from true and false to 1 and 0 you can do like this, text.innerText= ${port}: ${fProtocol[index]} - ${fStatus[index]? 1 : 0}; -> as for the styling that should be the subject of another question.

Aleks · Accepted Answer · 2020-09-29 23:47:01Z

2

ForEach would be better here. Map returns an object, you don't need that.

fStatus.forEach((_, index)=>{
  //then using index acces all the information
  const protocol = fProtocol[index];
  const protNumber = fPorts[index]
  ....
  text.innerHTML += 'Protocol is '+protocol+' and port number is '+protNumber;
});

Edit: also example of Talmacel Marian Silviu is basically the same thing.

edited Sep 29, 2020 at 23:47

answered Sep 29, 2020 at 23:42

Aleks

1,00412 silver badges15 bronze badges

6 Comments

Talmacel Marian Silviu Over a year ago

yep I was writing it at the same time :)

mastaSabin Over a year ago

what is the _ refrencing? im still understanding arrays :)

Talmacel Marian Silviu Over a year ago

the _ was used because he didn't use the status in the final solution, that could have also been named status and then you could add status in the string you are creating.

Aleks Over a year ago

status in this case, i just used _ because I wasn't going to use this argument in the exmaple

Talmacel Marian Silviu Over a year ago

yes you could give it any name...the first name in the callback function that forEach receives will take the value of each element in the array one by one starting with the first element and looping through them until the last

|

Daniil Loban · Accepted Answer · 2020-09-29 23:57:16Z

0

do it like this:

for(i=0; i<fPorts; i++){
  var text = document.createElement ('p');
  text.id = `firewallEndResults${i}`;
  text.innerHTML = `${fStatus[i]}, ${fPortTotal[i]}, ${fProtocol[i]}`;
  somediv.appendChild(text); // don't forget  
}

map is function for change array items and need callback

const newArray = arrayOfArrays.map(callback)

or

const newArray = arrayOfArrays.map((i)=>{ do something in cycle })

if you use React you can use map in JSX, but this is other story

answered Sep 29, 2020 at 23:57

Daniil Loban

4,4061 gold badge18 silver badges23 bronze badges

1 Comment

Talmacel Marian Silviu Over a year ago

dont you mean i<fPorts.length?

Collectives™ on Stack Overflow

JavaScript .map using multiple array sources

3 Answers 3

5 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related