How to loop over array entered in an input and categorize based on their type?

Question

I'm trying to let user input an array in an <input>. Then I would sort them into different arrays based on their data types; (number, strings and booleans).

But I cant figure out how to loop through the input to sort them out. Example input is : [1,"bad",false,3,"key"]

EXTRA: If you can help complete code. This the source code :Codepen

function sort() {
  const numbers = [];
  const strings = [];
  const booleans = [];
  const others = [];
  const inpArr = document.querySelectorAll(".input");
  //console.log(inpArr.value);
  for (let i = 0; i < inpArr.length; i++) {
    console.log(inpArr[i].value);
    switch (typeof inpArr[i].value) {
      case "Number":
        numbers.push(inpArr[i].value);
        break;

      default:
        console.log(typeof inpArr[i].value)
    }
  }

  const objectResult = {
    "Strings": strings,
    "Numbers": numbers,
    "Booleans": booleans,
    "Others": others

  };

  const JsonObj = JSON.stringify(objectResult)
  document.querySelector("#rawResult").innerText = JsonObj;

}

<div class="inputs">
  <input class="input" placeholder="Enter an Array" />
  <button onclick="sort()">SORT ARRAY</button>
</div>

<div class="result">
  <div id="rawResult"></div>
  <div id="tableResult"></div>
</div>

I need how to loop through the inpArr and sort each values into their respective arrays. and show the user as object

You only have one `input` with a class of `input`, so you'll only have one value in your array... — Heretic Monkey, Feb 22 '19 at 15:08
i'm surprised why are we pushing to constant variables else why are we using const variable here — ANR Upgraded Version, Feb 22 '19 at 15:11
Possible duplicate of [Convert string with commas to array](https://stackoverflow.com/questions/13272406/convert-string-with-commas-to-array) — Heretic Monkey, Feb 22 '19 at 15:12
What are you trying to do? What is a sample of the input entered in the `input`? Are you entering them separated by a comma? Do you want to try to *parse* the input to numbers, booleans in some order and settle for `string` at the end? — adiga, Feb 22 '19 at 15:12
If you're asking a user to enter an array, they'll likely enter "1,2,3". If you want to parse that as an array. see the dupe — Heretic Monkey, Feb 22 '19 at 15:12
@ANRUpgradedVersion you can push to a `const` array variable. Only reassignment is not allowed — adiga, Feb 22 '19 at 15:17
Also, please do not vandalize your posts. Your edit invalidates the answers and comments posted here. — adiga, Feb 22 '19 at 20:43

adiga · Accepted Answer · 2019-02-22T15:37:56.193

1

You can do something like this using JSON.parse. I have changed the name of the objectResult keys and made it similar to what typeof returns so that it's easier to sort them into different categories using [] brackets. You can use a switch instead if you want custom keys like Others

function sort() {
  const numbers = [];
  const strings = [];
  const booleans = [];
  const others = [];
  const value = document.querySelectorAll(".input")[0].value;
  let inputArray

  try {
    inputArray = JSON.parse(value)
  } catch {
    alert("Please enter a valid JSON string")
    return;
  }

  const objectResult = {
    "string": strings,
    "number": numbers,
    "boolean": booleans,
  };

  inputArray.forEach(item => {
    objectResult[typeof item].push(item)
  });

  const JsonObj = JSON.stringify(objectResult)
  document.querySelector("#rawResult").innerText = JsonObj;
}

<div class="inputs">
  <input class="input" placeholder="Enter an Array" value='[1,"bad",false,3,"key"]' />
  <button onclick="sort()">SORT ARRAY</button>
</div>

<div class="result">
  <div id="rawResult"></div>
  <div id="tableResult"></div>
</div>

edited Feb 22 '19 at 15:37

answered Feb 22 '19 at 15:23

adiga

34,372
9
61
83

i get this error : Unexpected token, expected ( (12:8) – Pelumi Feb 22 '19 at 15:35
On which line exactly? It works fine here on the snippet. Click on `Run code snippet` to test it out – adiga Feb 22 '19 at 15:37
the line you wrote } catch { – Pelumi Feb 22 '19 at 20:31
sorry for late reply – Pelumi Feb 22 '19 at 20:31
@Pelumi it works in the snippet without an issue. There was an additional `()` after `catch` when I posted but I removed it later. – adiga Feb 22 '19 at 20:33

score 0 · Answer 2 · answered Feb 22 '19 at 15:24

0

You can't do by typeof , you can do by some simple method like isNaN, for boolean I think you need to check exact string for true or false or other will string ...

if(!isNaN(inpArr[i].value)) { //Number
　　numbers.push(inpArr[i].value);
} else if(inpArr[i].value == "true" || inpArr[i].value == "false") { // boolean
   booleans.push(inpArr[i].value);
} else { // String
   strings.push(inpArr[i].value);
}

answered Feb 22 '19 at 15:24

Jack jdeoel

4,554
5
26
52

i think my for loop is the problem – Pelumi Feb 22 '19 at 20:34

How to loop over array entered in an input and categorize based on their type?

2 Answers2