Использование вызова AJAX для страницы asp, а затем использование данных JSON, возвращаемых со страницы, для заполнения поля выбора параметрами - PullRequest
Новая
       77

Использование вызова AJAX для страницы asp, а затем использование данных JSON, возвращаемых со страницы, для заполнения поля выбора параметрами

1 голос
/ 07 ноября 2019

Я пытаюсь заполнить поле select на основе данных JSON, возвращаемых с моей страницы ASP: http://accdbmgr -001-site1.etempurl.com / ajax.asp

Это данные, возвращаемые с сервера: 

{
  "data": [{
    "Lastname": "Roussel",
    "Firstname": "Donald"
  }, {
    "Lastname": "Sabourin",
    "Firstname": "Manon"
  }, {
    "Lastname": "Kelly",
    "Firstname": "Bruce"
  }]
}

Однако по какой-то причине он просто не может добавить мои данные JSON в поле выбора. Я хотел бы, чтобы параметры отображались как: Lastname, FirstName

<div id="test"></div>
<form>
  <select id="select1"></select>
</form>

$(document).ready(function() {
  $.get('http://accdbmgr-001-site1.etempurl.com/ajax.asp', {
    category: 'client',
    type: 'premium'
  }, function(data) {
    alert("success")
    //$("#test").html(data)
    var obj = JSON.parse(data);
    for (i in obj) {
      $('#select1').append(new Option(obj[i].Firstname, obj[i].Lastname));
    }
  });
});

1 Ответ

2 голосов
/ 07 ноября 2019

Основная проблема заключается в том, что вы перебираете obj, когда вместо этого вам нужно перебирать массив obj.data.

Также обратите внимание, что вы можете использовать map() для создания массивастроки, которые вы можете затем append() один раз, чтобы сделать логику более краткой и более производительной.

Наконец, ваш код в настоящее время создает элемент option с Firstname в качестве текста элемента и Lastname в качестве value. Если вы хотите, чтобы текст был в формате Lastname, Firstname, вам нужно явно установить для него текст. Попробуйте это: 

var obj = {
  "data": [{
    "Lastname": "Roussel",
    "Firstname": "Donald"
  }, {
    "Lastname": "Sabourin",
    "Firstname": "Manon"
  }, {
    "Lastname": "Kelly",
    "Firstname": "Bruce"
  }]
}

var options = obj.data.map(function(item) {
  return `<option>${item.Lastname}, ${item.Firstname}</option>`;
});
$('#select1').append(options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>
<form>
  <select id="select1"></select>
</form>

Также обратите внимание, что JSON.parse() не требуется, если вы установили dataType: 'json' в запросе или используете $.getJSON()

...