Как динамически увеличивать имена переменных в javascript?

Question

Я создаю простое приложение с рецептами, используя Node / Express. Пользователь получает форму «Новый рецепт» HTML, в которой он может нажать кнопку «Добавить ингредиент» и добавить в форму столько ингредиентов, сколько ему нужно. Используя jQuery, каждый раз при нажатии на значок плюса генерируется новый текстовый ввод для нового ингредиента:

        var newIngredient = $('#newIngredient').val();

        ingredientCount++;

        //give each ingredient a unique name based on count
        var ingredientID = "ingredient_" + ingredientCount

        // reset input to blank
        $("#newIngredient").val("");

        // add ingredient to list for user to see or edit.
        $("#ingredientsList").append(
           '<input class="form-control" type="text" required 
            name=' + ingredientID + ' value="' + newIngredient + '">')

Каждому добавленному ингредиенту присваивается уникальное имя через счетчик. Это все работает нормально, и когда форма отправлена, я получаю:

{
  name: 'Soup',
  ingredient_1: 'carrots',
  ingredient_2: 'salt',
  ingredient_3: 'turnips',
  method: 'Throw all these ingredients together and voila, you have a terrible soup.'
}

В бэкэнде я хочу взять каждый из этих ингредиентов и добавить их в массив «ингредиенты» (потому что я не думаю, что Я могу отправить массив ингредиентов из формы HTML). Я явно не хочу жестко кодировать ingredients.push(req.body.ingredient_1), ingredients.push(req.body.ingredient_2) et c ... потому что количество ингредиентов для каждого рецепта будет различным. Есть ли способ увеличить имена переменных? Это может проиллюстрировать то, что я пытаюсь сделать, хотя я знаю, что это явно не работает:

ingredientsList=[];

var counter=1;

while(req.body.**"ingredient_"+counter**){
    ingredientsList.push(req.body.**'ingredient_'+counter**);
    counter++
}

Альтернативные идеи для передачи динамически созданных пар имя: значение из формы HTML в JS бэкэнд было бы желательно, но я также хотел бы знать, возможно ли динамическое увеличение параметров, как я пытался выше - req.body.parameter[i]

Спасибо!

Answer 1

потому что я не думаю, что смогу отправить массив ингредиентов из HTML формы

Это не так. Могу ли я предложить отправить объект JSON на сервер?

Таким образом, вы сможете:

1. Отправить любую структуру, какую хотите
2. Упростите свою жизнь, переместив разбор в бэкэнд

От клиента:

var data = {
    name: 'Soup',
    ingredient_1: 'carrots',
    ingredient_2: 'salt',
    ingredient_3: 'turnips',
    method: 'Throw all these ingredients together and voila, you have a terrible soup.'
};

$.ajax({
    url: url,
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(data),
    dataType: 'json',
    success: function(data) {
        //On success do something
        alert(data);
    },
    error: function(xhr, ajaxOptions, thrownError) {
        //On error do something
    }
});

... и на стороне сервера что-то вроде:

const bodyParser = require('body-parser')

app.use(
  bodyParser.urlencoded({
    extended: true
  })
)

app.use(bodyParser.json())

app.post('/endpoint', (req, res) => {
  console.log(req.body.name) // 'Soup'
})

Надеюсь, это поможет! ?

Answer 2

Вы можете динамически проверять наличие таких ключей, если вы уверены, что они имеют номера c. Если возможно иметь ингредиент_1 и ингредиент_3 , но нет ингредиента_2 , то вам нужно будет удалить оператор прерывания.

var data = {
  name: 'Soup',
  ingredient_1: 'carrots',
  ingredient_2: 'salt',
  ingredient_3: 'turnips',
  method: 'Throw all these ingredients together and voila, you have a terrible soup.'
}
var ingredientsList=[];
for(var num=1; num<10000;num++){
  if(!data['ingredient_'+num]){break;}
  ingredientsList.push(data['ingredient_'+num]);
}
console.log(ingredientsList);

Answer 3

Редактировать: вы можете выполнить sh это довольно легко в одну строку:

const DATA = {
  name: 'Soup',
  ingredient_1: 'carrots',
  ingredient_2: 'salt',
  ingredient_3: 'turnips',
  method: 'Throw all these ingredients together and voila, you have a terrible soup.'
}

let i = Object.keys(DATA).filter(k => k.startsWith("ing")).map(o => DATA[o]);

console.log(i);

Вместо добавления свойств к вашему объекту как ingredient1, ingredient2 и т. Д. c .. почему бы вам просто не использовать массив с именем ingredients ?

Нечто подобное демонстрирует на очень высоком уровне, как выполнить sh то, что вы хотите.

var RECIPE = {
  name: "",
  ingredients: [],
  method: "",
}

$("#add-ingredient").on('click', event => {
  let ingredient = $("#ingredient").val();
  if (ingredient) {
    RECIPE.ingredients.push(ingredient);
    $("#ingredient-list").append(`<li>${ingredient}</li>`);
    $("#ingredient").val("");
  } else {
    alert("Please enter ingredient first");
  }
});

$("#submit").on('click', event => {
  let name = $("#recipe-name").val();
  let method = $("#recipe-method").val();
  let empties = [];
  if (name) { RECIPE.name = name; } 
  else { empties.push("recipe name"); }
  if (method) { RECIPE.method = method; } 
  else { empties.push("recipe method"); }
  if (RECIPE.ingredients.length <= 0) { empties.push("ingredients"); }
  if (empties.length) { alert(`Please fill out ${empties.join(" and ")}`); } 
  else { alert("This is what we would post:\r\n\r\n" + JSON.stringify(RECIPE,null,2)); }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="recipe-name" type="text" placeholder="Enter Recipe Name"/>
<br />
<textarea id="recipe-method" placeholder="Enter Recipe Method"></textarea>
<br />
<input id="ingredient" type="text" placeholder="Enter Ingredient" />
<button id="add-ingredient">Add Ingredient</button>
<ul id="ingredient-list"></ul>
<br /><hr />
<button id="submit">Submit Recipe</button>

Answer 4

Вы можете использовать строковые литералы:

const ingredientsList = [];
var counter=1;
while(yourCondition){
    ingredientsList.push(`req.body.ingredient_${counter++}`);
}