I need to allocate a url to very student name in Javascript-CodePudding

The name list is supposedly as below:

Rose : 35621548

Jack : 32658495

Lita : 63259547

Seth : 27956431

Cathy: 75821456

Given you have a variable as StudentCode that contains the list above (I think const will do! Like:

const StudentCode = {
  [Jack]: [32658495],
  [Rose]: [35621548],
  [Lita]: [63259547],
  [Seth]: [27956431],
  [Cathy]:[75821456],
};

) So here are the questions:

1st: Ho can I define them in URL below: https://www.mylist.com/student=?StudentCode So the link for example for Jack will be: https://www.mylist.com/student=?32658495 The URL is imaginary. Don't click on it please.

2nd: By the way the overall list is above 800 people and I'm planning to save an external .js file to be called within the current code. So tell me about that too. Thanks a million

CodePudding user response：

Given

const StudentCode = {
  "Jack": "32658495",
  "Rose": "35621548",
  "Lita": "63259547",
  "Seth": "27956431",
  "Cathy": "75821456",
};

You can construct urls like:

const urls = Object.values(StudentCode).map((c) => `https://www.mylist.com?student=${c}`)
// urls: ['https://www.mylist.com?student=32658495', 'https://www.mylist.com?student=35621548', 'https://www.mylist.com?student=63259547', 'https://www.mylist.com?student=27956431', 'https://www.mylist.com?student=75821456']

To get the url for a specific student simply do:

const url = `https://www.mylist.com?student=${StudentCode["Jack"]}`
// url: 'https://www.mylist.com?student=32658495'

Not sure I understand your second question - 800 is a rather low number so will not be any performance issues with it if that is what you are asking?

CodePudding user response：

The properties of the object (after the trailing comma is removed) can be looped through using a for-in loop, (see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in)

This gives references to each key of the array and the value held in that key can be referenced using objectName[key], Thus you will loop through your object using something like:

     for (key in StudentCode) { 
       keyString = key; // e.g = "Jack"
       keyValue = StudentCode[key]; // e.g. = 32658495
       // build the urls and links
     }

to build the urls, string template literals will simplify the process (see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) allowing you to substitute values in your string. e.g.:

  url = `https://www.mylist.com/student=?${StudentCode[key]`}

Note the use of back ticks and ${} for the substitutions.

Lastly, to build active links, create an element and sets its innerHTML property to markup built using further string template literals:

  let link = `<a href=${url}>${keyValue}</a>`

These steps are combined in the working snippet here:

const StudentCode = {
  Jack: 32658495,
  Rose: 35621548,
  Lita: 63259547,
  Seth: 27956431,
  Cathy: 75821456,
};

 const studentLinks = [];
 
 for (key in StudentCode) { 
  let url = `https://www.mylist.com/student=?${StudentCode[key]}`;
  console.log(url);
  studentLinks.push(`<a href href="url">${key}</a>`) 
 }
 
 
 let output= document.createElement('div');
 output.innerHTML = studentLinks.join("<br>");
 
 document.body.appendChild(output);