Блог

Главная - Вопросы по программированию - Изменение объекта JSON, принимающего значение из таблицы

Изменение объекта JSON, принимающего значение из таблицы

#javascript #jquery #html #json

#javascript #jquery #HTML #json

Вопрос:

Я заполняю таблицу html с помощью объекта JSON, используя следующий код —

HTML — 

 <input type="button" value="Generate Table" id="btn" />

<div id="dvTable">
</div>

JS —

 $('#btn').click(function () {


    var obj = [{ id: 1, name: "bunny", city: "nyc",userinput:"",iscancelled:"" }, { id: 2, name: "sunny", city: "LA",userinput:"",iscancelled:"" }, { id: 3, name: "chubby", city: "PA",userinput:"",iscancelled:"" }
    , { id: 4, name: "punny", city: "DC",userinput:"",iscancelled:"" }, { id: 5, name: "money", city: "Pen",userinput:"",iscancelled:"" }];

    alert(JSON.stringify(obj));
    var table = document.createElement("table");
    table.border = "1";
    var columnCount = obj[0].length;

    var row = table.insertRow(-1);
    for (var i = 0; i < columnCount; i  ) {
        var headerCell = document.createElement("th");
        headerCell.innerHTML = obj[0][i];
        row.appendChild(headerCell);
    }

    $.each(obj, function (i, obj) {
        row = '<tr data-id="'   obj.id   '"><td><input type="checkbox" value='   obj.id   '></td><td>'   obj.id   '</td><td>'   obj.name   '</td><td>'
              obj.city   '</td><td><input type="text" id="address" ></td></tr>';

        table.append(row);
    });

    var dvTable = document.getElementById("dvTable");
    dvTable.innerHTML = "";
    dvTable.appendChild(table);



});

Для простоты я взял небольшой объект JSON, но обычно у меня очень тяжелый объект. Я хочу взять значение, которое пользователь вводит в каждое текстовое поле, и сохранить его в поле ‘userinput’ каждого элемента объекта JSON. Кроме того, я также хочу сохранить, установлен ли флажок или нет, и сохранить ‘Y’ или ‘N’ в поле ‘iscancelled’ объекта JSON.

Я написал следующий код для этого, но, похоже, это не работает. В чем может быть проблема? 

 var revArray="";
$("[type='input']").each(function () {
        revArray = $(this).val;
    });

$.each(obj, function (i, obj) {

        for (var i = 0; i < revArray.length; i  ) {
            obj.userInput= revArray[i];
        }
if ($("[type='checkbox']:checked"))
            obj.isCancelled = 'Y';
        else
            obj.isCancelled = 'N';
alert(JSON.stringify(obj));

Комментарии:

1. Чтобы быть педантичным, такого понятия, как объект JSON, не существует : то, что у вас есть, является объектом. (Или массив объектов.)

2. @nnnnnn Спасибо за это.

3. Что касается вашего фактического кода, первый .each() в вашем конечном блоке кода перезаписывает revArray строку на каждой итерации, но ваш другой код обрабатывает revArray как массив. for Вложенный внутри $.each() на самом деле не имеет смысла, потому что, по-видимому, вы хотите обновить каждый объект в obj массиве с помощью ввода и значения флажка из соответствующей строки, а не из всех строк.

4. Привет! Я удалил for внутри $.each(). Спасибо! Есть идеи, как получить значение каждого текстового поля в revArray?

Ответ №1:

Итак, я в конечном итоге сделал это с помощью jquery следующим образом, получив доступ к каждой строке таблицы, а затем найдя текстовое поле в этой строке — 

 $('table tr:gt(0)').each(function (i, row) {
            var $row = $(row);
            var val1 = $row.find('input[type="text"]').val();
        });

Для тех, кто сталкивается с подобными проблемами, может использовать его, работает отлично!