Как структурировать массив javascript

У меня есть динамическая форма, где вы можете нажать кнопку, и в форму добавляется новая строка формы. Запись в форме выглядит так:

<input type='text' class='custom' data-index='".$f."' name='column_value_one' value='1'>
<input type='text' class='custom' data-index='".$f."' name='column_value_two' value='2'>

Например, я добавляю 3 строки из приведенного выше, а data-index - от 0 до 3. Я пытаюсь обработать это, выполнив следующие действия:

var data = [];
$(".custom").each(function() {
    var index = parseInt($(this).attr('data-index'));
    data[index][$(this).attr("name")] = $(this).val();
});

Я пытаюсь получить конечный результат:

data[0]['column_value_one'] = 1;
data[0]['column_value_two'] = 2;
data[1]['column_value_one'] = 1;
data[1]['column_value_two'] = 2;

Я обычно пишу только PHP, поэтому я выкладываю массив, как указано выше. Но это будет массив Javascript / Jquery, а не PHP.

Буду признателен за любую помощь здесь.

Я должен был упомянуть, что $ f генерируется циклом PHP для каждого набора из двух будет новый идентификатор индекса данных.

— 04.10.2018 12:00

В чем проблема? Похоже, что использование map() и фактического index() родительского элемента может быть лучшим решением по сравнению с выводом статического значения в каждом элементе с сервера.

— 04.10.2018 12:01

Найдите последний ввод и добавьте +1 значение последнего ввода при нажатии

— 04.10.2018 12:03

Это дает мне ответ. Невозможно установить свойство column_value_one из undefined.

— 04.10.2018 12:03

javascript php jquery arrays

04.10.2018 11:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам необходимо инициализировать data[index] в {}, если индекс не существует.

data[index] = data[index] || {};

Нравиться:

var data = [];
$(".custom").each(function() {
  var index = parseInt($(this).attr('data-index'));
  data[index] = data[index] || {}; 
  data[index][$(this).attr("name")] = $(this).val();
});

console.info(data);

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='custom' data-index='0' name='column_value_one' value='1'>
<input type='text' class='custom' data-index='0' name='column_value_two' value='2'>
<input type='text' class='custom' data-index='1' name='column_value_one' value='1'>
<input type='text' class='custom' data-index='1' name='column_value_two' value='2'>
<input type='text' class='custom' data-index='2' name='column_value_one' value='1'>
<input type='text' class='custom' data-index='2' name='column_value_two' value='2'>

Рад помочь :)

— 04.10.2018 12:07

04.10.2018 12:03

Похоже, вам нужен массив объектов:

data = [
    {column_value_one: 1, column_value_two: 2},
    // ...
];

В этом случае, поскольку второй ввод следует за первым, вы можете сделать:

var data = $("input[name=column_value_one]").map(function() {
    return {column_value_one: this.value, column_value_two: $(this).next().val()};
}).get();

Живой пример:

var data = $("input[name=column_value_one]").map(function() {
    return {column_value_one: this.value, column_value_two: $(this).next().val()};
}).get();

console.info(data);

<input type='text' class='custom' data-index='0' name='column_value_one' value='11'>
<input type='text' class='custom' data-index='0' name='column_value_two' value='12'>
<input type='text' class='custom' data-index='1' name='column_value_one' value='21'>
<input type='text' class='custom' data-index='1' name='column_value_two' value='22'>
<input type='text' class='custom' data-index='2' name='column_value_one' value='31'>
<input type='text' class='custom' data-index='2' name='column_value_two' value='32'>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Или, если у вас может быть что-то среднее между ними, используйте два объекта jQuery:

var ones = $("input[name=column_value_one]");
var twos = $("input[name=column_value_two]");
var data = ones.map(function(index) {
    return {column_value_one: this.value, column_value_two: twos.eq(index).val()};
}).get();

var ones = $("input[name=column_value_one]");
var twos = $("input[name=column_value_two]");
var data = ones.map(function(index) {
    return {column_value_one: this.value, column_value_two: twos.eq(index).val()};
}).get();

console.info(data);

<input type='text' class='custom' data-index='0' name='column_value_one' value='11'>
<input type='text' class='custom' data-index='0' name='column_value_two' value='12'>
<input type='text' class='custom' data-index='1' name='column_value_one' value='21'>
<input type='text' class='custom' data-index='1' name='column_value_two' value='22'>
<input type='text' class='custom' data-index='2' name='column_value_one' value='31'>
<input type='text' class='custom' data-index='2' name='column_value_two' value='32'>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

В обоих случаях data-index не нужен (для этого; может быть, он понадобится для чего-то еще).

Спасибо TJ, есть решение. Однако оцените ответ.

— 04.10.2018 12:09

@PatrickMcCarthy - Только что добавил еще один. (И если он вам не нужен для чего-то другого, в data-index нет необходимости.)

— 04.10.2018 12:10

04.10.2018 12:04