Compare values of an array with values of an object

Question

I am making a simple code to practice some methods in JS, I would like to receive a string transforms them into an array, convert the elements into number, and compare with the objects of my object, I will leave a snippet of code

 const alf = {a : 1,b : 2,c : 3,d : 4,e : 5,f : 6,g : 7,h : 8,i : 9,j : 10,k : 11,l : 12,m : 13,n : 14,o : 15,p : 16,q : 17,r : 18,s : 19,t : 20,w : 21,u : 22,v : 23,x : 24,y : 25,z : 26}

const Calcular = () => {
  elemResult = document.getElementById("resultado");
  str = document.getElementById("texto").value;
  str = str.toLowerCase().split("").map(p => {
    if(p in alf){
      return alf[p];
    }
  }).sort((a, b) => a-b).map(n => );
  elemResult.innerText = str;
}

Inside the last map, I would like to convert the numbers again into string

Answer 1

You can transform the array into a string using the .join as in the example below (the parameter is the string used to separate the elements in the string, the default value is ',')

const alf = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, o: 15, p: 16, q: 17, r: 18, s: 19, t: 20, w: 21, u: 22, v: 23, x: 24, y: 25, z: 26 }

const Calcular = () => {
  elemResult = document.getElementById("resultado");
  str = document.getElementById("texto").value;
  str = str.toLowerCase().split("").map(p => {
    if (p in alf) {
      return alf[p];
    }
  }).sort((a, b) => a - b).join('');
  elemResult.innerText = str;
}

document.getElementById("texto").onblur = Calcular

<input type="text" id="texto" />
<div id="resultado"></div>

Answer 2

Assuming that your convert the numbers again into String refers turns them back into the original letters based on the number, you can use the method find array, starting from an array of keys with Object.keys. First we build a function to get the key based on the value:

const obterChave = (valor) => Object.keys(alf).find(key => alf[key] === valor);

I used Arrow Functions also since it was using, which makes the code more consistent.

Then you just need to complete the map that left open calling this function:

.sort((a, b) => a-b).map(n => obterChave(n));

See an example of this code working:

const alf = {a : 1,b : 2,c : 3,d : 4,e : 5,f : 6,g : 7,h : 8,i : 9,j : 10,k : 11,l : 12,m : 13,n : 14,o : 15,p : 16,q : 17,r : 18,s : 19,t : 20,w : 21,u : 22,v : 23,x : 24,y : 25,z : 26}
const obterChave = (valor) => Object.keys(alf).find(key => alf[key] === valor);
const texto = document.getElementById("texto");

const Calcular = () => {
  elemResult = document.getElementById("resultado");
  str = texto.value;
  str = str.toLowerCase().split("").map(p => {
    if(p in alf){
      return alf[p];
    }
  }).sort((a, b) => a-b).map(n => obterChave(n));
  elemResult.innerText = str;
}

texto.addEventListener("keypress", () => Calcular());

Escreva um texto
<input type="text" id="texto">
<div id="resultado"></div>

But your code ends up showing the letters that are in the ordered text if they exist in the dictionary alf. A simpler way to do this is by ordering the letters directly with sort and removing the ones that don’t matter filter:

const alf = {a : 1,b : 2,c : 3,d : 4,e : 5,f : 6,g : 7,h : 8,i : 9,j : 10,k : 11,l : 12,m : 13,n : 14,o : 15,p : 16,q : 17,r : 18,s : 19,t : 20,w : 21,u : 22,v : 23,x : 24,y : 25,z : 26}
const texto = document.getElementById("texto");

const Calcular = () => {
  elemResult = document.getElementById("resultado");
  str = texto.value.split("")
        .sort((a, b) => a.localeCompare(b)) //ordena por letra
        .filter(n => n in alf); //filtra só os que estão no dicionario
  elemResult.innerText = str;
}

texto.addEventListener("keypress", () => Calcular());

Escreva um texto
<input type="text" id="texto">
<div id="resultado"></div>

So it is not necessary to convert to number to sort and then convert back to letter.