JS String concatenate encoding issue

Question

I have two html datalists, and I get their input values to query a json file. I first search the keys of my json file which are college majors, their values are their courses. So once the object key equals the program, I return that element because I want to further query that element with the second input field which is a course number. This step is always successful at returning the correct program courses corresponding to the program input.

The second step is where things go bad. I want to now take that program element and look through all the names of the courses in that program. I concatenate the two input fields, program + " " + course. The program is a major like "CSE" or "I S" and the course is any 3 digit number like "143" or "310". Each object element in the program has a string name attribute like "CSE 143". This name attribute does not equal the program + " " + course even though they are both of type string and the same value WHEN I am looking at a program that has a space in it. For example, I want to find the course "I S 310". I successfully search for the program name that equals "I S". I iterate through the keys and find the correct element value using this operation Object.keys(jsondata[index]) == program. program is a variable containing the string "I S". As stated previously, this is successful, but if I iterate through the children of that objectkey value to find id, like programdata[index].children == program + " " + course, it doesnt work. If I instead hardcode the value, programdata[index].children == "I S 310", it works! This leads me to believe that the concatenation operation for these two variables changes the encoding of the string. According to console.log, the type of "I S 310" and program + " " + course are both Strings except they output a different encodeURIComponent().

Ill write what the output to the console is since im not reputable enough:

Step 1

function getProgramCourses(data, program) {
        var programKeys = Object.keys(data);
        for (var i = 0; i < programKeys.length; i++) {
            if (Object.keys(data[i]) == program) {
                return data[i][Object.keys(data[i])];
            }
        }
        return objs
    }

---

program = "CSE"
console.log(program)
console.log(encodeURIComponent(program));

Output:
CSE
CSE

---

program = "I S"
console.log(program)
console.log(encodeURIComponent(program));

Output:
I S
I%C2%A0S

---

Those unencoded hidden characters dont affect this first step of finding the courses offered by the "I S" program. Now when I want to find a specific course within the "I S" program like "I S 310":

Step 2

//data is object array of all courses in this program
function getCourse(data, program, course) {
        pc = program + " " course;
        for (var i = 0; i < data.length; i++) {
            if (data[i].name == pc) {
                return data[i];
            }
        }
    }

"CSE" = program and "143" = course

pc = program + " " + course;
console.log(pc)
console.log(encodeURIComponent(pc));

Output:
CSE 142
CSE%20142

---

["I S" = program and "310" = course][2]

pc = program + " " + course;
console.log(pc)
console.log(encodeURIComponent(pc));

Output:
I S 310
I%C2%A0S%20310

---

This second step only works for programs that dont have spaces like "CSE" or "MATH". Doesnt work for "A A" or "I S". data[i].name is type String and so is pc. Sorry about the lengthy post, I just wanted to be as descriptive as possible. Any help would be greatly appreciated.

Basically

Here is my problem:

        console.log("A A 198")
        console.log(encodeURIComponent("A A 198"))
        console.log(program + " " + course)
        console.log(encodeURIComponent(program + " " + course))

Output:
A A 198
A%20A%20198

A A 198
A%C2%A0A%20198

not equal

Answer 1

Your program variable contains a character which is like a space but isn't a space. Make sure it isn't an encoding issue, else you can fix this with this simple code.

encodeURIComponent(program.replace(/\u00a0/g, ' ') + ' ' + course)