add parentheses to lowest and highest number in an array of strings

user_15366635 0
Viewed 114

This code that will create a p element for every index in an array and it will put a parantheses on the lowest and highest number in an array

const liArray = [5.6, 8.7, 1.3, 10, 56];
const min = Math.min.apply(Math, liArray);
const max = Math.max.apply(Math, liArray);
const parentElement = document.getElementById("myDiv");

liArray.forEach((currentValue, index) => {
  const elm = document.createElement('p');
  let text = `${index + 1}. ${(currentValue == min || currentValue == max) ? `(${currentValue})` : currentValue}`;
  elm.innerText = text;
  parentElement.appendChild(elm);
});
<div id="myDiv"></div>

but my array is like this

const liArray = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"]

and i want to also add parentheses to the lowest and highest number and output like this

1. 5.6 hello
2. 8.7 hi
3. (1.3) hey
4. 10 hi
5. (56) hello

Here is what i tried :

i tried this code that seperates the numbers and letters into 2 different arrays so i can apply the max and min to the numbers

const liArray = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"];
const parentElement = document.getElementById("myDiv");

const getNumbers = liArray.map((i) => Number(i.replace(/[^0-9.]/g, "")));
const getWords = liArray.map((i) => i.replace(/[0-9.]/g, ""));

const min = Math.min.apply(Math, getNumbers);
const max = Math.max.apply(Math, getNumbers);

getNumbers.forEach((currentValue, index) => {
  const elm = document.createElement('p');
  let text = `${index + 1}. ${(currentValue == min || currentValue == max) ?
 `(${currentValue})` : currentValue}. ${getWords}`;
  elm.innerText = text;
  parentElement.appendChild(elm);
});

but it outputs this instead


2. 8.7. hello, hi, hey, hi, hello

3. (1.3). hello, hi, hey, hi, hello

4. 10. hello, hi, hey, hi, hello

5. (56). hello, hi, hey, hi, hello
html jquery javascript
4 Answers

You are calling your method getWords to display words but it is returning an array of all words. Call this method with the index like ${getWords[index]} to get what you need.

user_132611520

Is this what you want? You just forgot to get element of the getwords array.

const liArray = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"];
const parentElement = document.getElementById("myDiv");

const getNumbers = liArray.map((i) => Number(i.replace(/[^0-9.]/g, "")));
const getWords = liArray.map((i) => i.replace(/[0-9.]/g, ""));

const min = Math.min.apply(Math, getNumbers);
const max = Math.max.apply(Math, getNumbers);

getNumbers.forEach((currentValue, index) => {
  const elm = document.createElement('p');
  let text = `${index + 1}. ${(currentValue == min || currentValue == max) ?
 `(${currentValue})` : currentValue}. ${getWords[index]}`;
  elm.innerText = text;
  parentElement.appendChild(elm);
});
<div id="myDiv"></div>

user_41018940

You could take an array of numbers and check with this array for min and max value.

const
    array = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"],
    values = array.map(s => +s.split(' ', 1)),
    min = Math.min(...values),
    max = Math.max(...values),
    parentElement = document.getElementById("myDiv");

array.forEach((currentValue, index) => {
    const elm = document.createElement('p');
    elm.innerText = `${index + 1}. ${values[index] == min || values[index] == max
        ? currentValue.split(' ').map((s, i) => i ? s : `(${s})`).join(' ')
        : currentValue}`;
  
    parentElement.appendChild(elm);
});
<div id="myDiv"></div>

Version with a real list.

const
    array = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"],
    values = array.map(s => +s.split(' ', 1)),
    min = Math.min(...values),
    max = Math.max(...values),
    ol = document.createElement('ol');

document.body.appendChild(ol);

array.forEach((currentValue, index) => {
    const li = document.createElement('li');
    li.innerText = values[index] == min || values[index] == max
        ? currentValue.split(' ').map((s, i) => i ? s : `(${s})`).join(' ')
        : currentValue;
  
    ol.appendChild(li);
});

user_14476750

You can try this

const liArray = ["5.6 A", "8.7 B", "1.3 C", "10 D", "56 E"];
const min = liArray.reduce((acc, cur) => {
  const cur1 = parseFloat(cur);
  const acc1 = parseFloat(acc);
  return !acc ? cur : acc1 > cur1 ? cur : acc;
  }, null);
  const max = liArray.reduce((acc, cur) => {
  const cur1 = parseFloat(cur);
  const acc1 = parseFloat(acc);
  return !acc ? cur : acc1 < cur1 ? cur : acc;
  }, null);
const parentElement = document.getElementById("myDiv");

liArray.forEach((currentValue, index) => {
  const elm = document.createElement('p');
  let text = `${index + 1}. ${(currentValue == min || currentValue == max) ? `(${currentValue.replace(/[^0-9.]/g, "")})${currentValue.replace(/[0-9.]/g, "")}` : currentValue}`;
  elm.innerText = text;
  parentElement.appendChild(elm);
});
<div id="myDiv"></div>

I just change your min-max find method into reduce array method, to get required output

user_153423710
Related