Алексей

Давайте итерационно:
1. функция map может иметь 3 аргумента. Вы используете только один. Т.о. в переменной n лежит объект со структурой как в goods.json. [object Object] это как раз попытка вывести значение data-art="${n}"
2. Полагаю data-art должен выглядеть так, что бы в дальнейшем получить количество:

<button class="minus" data-art="${n.name}">-</button>

3. Понадобиться еще функция:

function getQty(articul) {
// Вернет количество
    return cart[articul];
  }

4. В результате outputGoods преобразиться в следующее:

function outputGoods(goods) {
    document.getElementById("goods").innerHTML = goods
      .map(
        n => `
      <button class="delete" data-art="${n.name}" >x</button>
        <img src="${n.image}" width="48">
        ${n.name}
        <button class="minus" data-art="${n.name}">-</button>
  ${getQty(n.name)}
        <button class="plus" data-art="${n.name}">+</button>
        ${getQty(n.name)}*${n.cost}
    `
      )
      .join("");
    document.querySelectorAll("button.add-to-cart").forEach(function(but) {
      but.addEventListener("click", addToCart);
    });
  }

С этим можно работать дальше. :)

Добрый день.
Первое, что бы я сделал - это проверил, что смайлик не попал в пограничное состояние максимума (типа двоеточие это 20-й символ, а D это уже 21-й). Такие случаи стоит обработать отдельно.
Второе: проверяете длину строки на максимально допустимое количество символов. Если больше, то откусываете от значения первые 20 символов и скармливаете VALUE инпута.
PS. Непосредственно на ионике не пробовал.