Блог

Я пытаюсь добавить значение JSON в html в атрибуте value входного тега и передать его через форму.

 <div class="results"></div>
<script src="jquery.min.js"></script>
<script>
 
  var url = "MYID";

  $.getJSON(url, function(data) {

    var entry = data.feed.entry;

    var result = entry.filter(entry => entry.gsx$status.$t.length < 4); 

    var form = "<form class='gform' method='post' data-email='MYEMAIL' action='MYGOOGLEAPP'><input id='createObject' name='Submit1' type='submit' value='submit' />"
    var formend = "</form>"

    $(result).each(function() {
      // Column names will only pull from status
      $('.results').prepend(
        '<H1>INCOMING</H1>',
        '<table>',
        '<tr><th>DESCRIPTION:</th><th>PRICE:</th><th>QTY</th></tr>',
        '<tr><td>'   this.gsx$description.$t   '</td><td>'   this.gsx$price.$t   '</td><td>'   this.gsx$qty.$t   '</td></tr>',
        '<br>',
        '<tr><td>ORDER TOTAL:</td><td>$'   this.gsx$total.$t   '</td></tr>',
        '<tr><td>STATUS:</td><td>'   this.gsx$status.$t   '</td></tr>',
        '<tr><td>REG NUMBER:</td><td>'   this.gsx$regisnbrtx.$t   '</td></tr>',
        '<tr><td>CUSTOMER:</td><td>'   this.gsx$customer.$t   '</td></tr>',
        '<tr><td>SHIPPING ADDRESS:</td><td>'   this.gsx$address.$t   '</td></tr>',
        '<tr><td>DATE CREATED:</td><td>'   this.gsx$date.$t   '</td></tr>',
        '</table>',
        '<br>',
        form,
        "<input type='checkbox'  id='data'  name='data' class='selector' value="   this.gsx$regisnbrtx.$t   ">test</input>",
        formend
      );
    });

  });

  $(document).ready(function() {
    $('#createObject').click(function() {
      var ar = [];
      $('.selector').each(function() {
        if ($(this).is(':checked')) {
          ar.push({
            reg: $(this).attr('value')
          });
        }
      });
      alert(JSON.stringify(ar));
    });
  });
</script>  

Итак, функция $ (document) работает (протестировал ее с помощью другой кнопки). Но информация в var ar не передается как часть ввода формы. Так что это просто выплевывание пустых данных. Учитывая, что я играю с prepend, чтобы заставить это работать, я пробежался по своему коду, чтобы проверить наличие ошибок в JS в HTML, но я не могу найти никакой проблемы. Итак, я что-то перепутал в той части, где он переходит в форму?

Это то, что он возвращает: {«результат»: «успех»,»данные»:»{«Submit1»:[«отправить»]}»}

Спасибо всем!

Чтобы использовать each для перебора массива, вы должны использовать его как

 $.each(result, function(index, value) {
// Column names will only pull from status
  

А затем использовать value вместо this

Я думаю, что проблема, с которой вы сталкиваетесь, связана с тем, как jQuery справляется this . Цитирую с их страницы

(Значение также может быть доступно через ключевое слово this, но Javascript всегда будет преобразовывать это значение в объект, даже если это простая строка или числовое значение.)

jQuery each()

Спасибо @bobjoe за помощь, в конце концов обнаружил, что я могу создать var с добавляемым HTML, и это сработало. Вот код:

 var input = "<input type='checkbox'  id='data'  name='data' class='selector' value='"
var inputend = "'/>"

   $(result).each(function(){
    // Column names will only pull from status
     $('.results').prepend(
        '<H1>INCOMING PURCHASE ORDER</H1>',
        '<table>',
        '<tr><th>DESCRIPTION:</th><th>PRICE:</th><th>QTY</th></tr>',
        '<tr><td>' this.gsx$description.$t '</td><td>' this.gsx$price.$t '</td><td>' this.gsx$qty.$t '</td></tr>',
        '<br>',
        '<tr><td>ORDER TOTAL:</td><td>$' this.gsx$total.$t '</td></tr>',
        '<tr><td>STATUS:</td><td>' this.gsx$status.$t '</td></tr>',
        '<tr><td>REG NUMBER:</td><td>' this.gsx$regisnbrtx.$t '</td></tr>',
        '<tr><td>CUSTOMER:</td><td>' this.gsx$customer.$t '</td></tr>',
        '<tr><td>SHIPPING ADDRESS:</td><td>' this.gsx$address.$t '</td></tr>',
        '<tr><td>DATE CREATED:</td><td>' this.gsx$date.$t '</td></tr>',
        '</table>',
        '<br>',
        form input this.gsx$regisnbrtx.$t inputend,
        formend
        );
  });
  

Это обеспечивает данные, предназначенные для результатов:

{«результат»: «успех»,»данные»:»{«данные»:[«4″],» Submit1″:[«отправить»]}»}