JavaScript replace multiple if statements

Question

I have couple of identical html pages and I would like to use the same JavaScript file which reads text files and changes data on the html pages. As the text files are different for every page I have done it with multiple if statements. It would be better if there is a way to replace it with some loop?

if (window.location.pathname=='/myapp/main.html') {
  $.get('data/data1.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');
}

if (window.location.pathname=='/myapp/main2.html') {
  $.get('data/data2.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');
}

if (window.location.pathname=='/myapp/main3.html') {
  $.get('data/data3.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');
}

if (window.location.pathname=='/myapp/main4.html') {
  $.get('data/data4.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');
}

Thank you in advance!

you can write a simple function which returns your text file path based on html path, thats it. — Rahul R.
– Rahul R., Commented May 21, 2018 at 19:37
I second what @RahulR. said. In addition to that, use .map or .reduce instead of .forEach — Max Baldwin
– Max Baldwin, Commented May 21, 2018 at 19:38
switch statements are easier to read than multiple if statements too. — Jonathan Rys
– Jonathan Rys, Commented May 21, 2018 at 19:39
Actually a .forEach makes sense since the OP does not need to manipulate the array. 'For each item do something unrelated to said item' — Adam Patterson
– Adam Patterson, Commented May 21, 2018 at 19:54

epascarello · Accepted Answer · 2018-05-21 19:38:15Z

4

So either use an object

var paths = {
 "/myapp/main.html" : "data/data1.txt",
 "/myapp/main2.html" : "data/data2.txt",
 "/myapp/main3.html" : "data/data3.txt",
 "/myapp/main4.html" : "data/data4.txt"
};

var filePath = paths[window.location.pathname];
if (filePath) {
  $.get(filePath, ...)
}

or use a reg exp to match the number and use that if the paths are the same.

answered May 21, 2018 at 19:38

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

2 Comments

Stephen Over a year ago

Beat me to it. But the important thing is "why loop if you don't have to?". This, or a regex, seem like preferred ways of doing it.

Stephen Over a year ago

No, no, sorry, the OP had asked "It would be better if there is a way to replace it with some loop?", that's what I was referring to.

Asons · Accepted Answer · 2018-05-21 20:05:47Z

2

Since your paths have the same structure, you could simply use a regex to get the number.

With that you can create new pages/data as you go, and it will just pick them up automatically.

if (window.location.pathname.startsWith('/myapp/main') {  // this "if" might not be needed

  var pathnum = window.location.pathname.replace(/[^0-9]/g,'');

  $.get('data/data' + pathnum + '.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');

}

And if no number as in main.html should use data1.txt, you can do something like this

  $.get('data/data' + (pathnum == '' ? 1 : pathnum) + '.txt', function(data) {

edited May 21, 2018 at 20:05

answered May 21, 2018 at 19:44

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Comments

Chase DeAnda · Accepted Answer · 2018-05-21 19:40:32Z

1

Created a simple reusable function that accepts a path and a data url:

const getData = (path, url) => {
  if (window.location.pathname === path ) {
    $.get(url, function(data) {
       var bigarray = data.split('\n');
       bigarray.forEach(function(currRow){
         currentRow = currRow.split(';');
         table.push(currentRow);});
    }, 'text');
  }
}

// Usage
getData('/myapp/main.html', 'data/data1.txt');
getData('/myapp/main2.html', 'data/data2.txt');
getData('/myapp/main3.html', 'data/data3.txt');
getData('/myapp/main4.html', 'data/data4.txt');

answered May 21, 2018 at 19:40

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

Comments

Adam Patterson · Accepted Answer · 2018-05-22 20:49:08Z

You could use template literals.

Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

function changeText() {
    const toString = Object.prototype.toString;
    const { pathname } = window.location;

    // Get the index of the dot
    const dot = pathname.search('.');

    // Grab the character immediately preceding the dot
    const testChar = pathname.charAt(dot-1);

    // If the character is not a number, set the index to 1
    const index = toString.call(testChar) === '[object Number]'
        ? testChar
        : 1;

  // Use the template literal
  $.get(`data/data${index}.txt`, function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');

}

The method requires no looping or custom text. Usage is simply: changeText().

Collectives™ on Stack Overflow

JavaScript replace multiple if statements

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related