Изменить формат значения на входе с запроса AJAX

Question

У меня есть переменная data, содержащая объект, подобный этому:

{
  "details": {
    "id": 10,
    "name": John Doe,
    "hobbies": [{
        "id": 1,
        "name": "Football"
      },
      {
        "id": 2,
        "name": "Badminton"
      },
      {
        "id": 3,
        "name": "Running"
      }
    ],
    "dob": 1989-12-31
  }
}

Я получаю его с помощью этого AJAX запроса:

$.ajax({
  type: 'POST',
  url: "{{ route('askdata') }}",
  dataType: 'json',
  data: { 'id': $('#member_id').val(), },
  success: function(data) {
    $('#id').val(data.details.id);
    $('#name').val(data.details.name);
    $('#dob').val(data.details.dob);
    $('#hobbies').val(JSON.stringify(data.details.hobbies, ['name']));
  }
});

Я получаю значение в hobbies введите следующее:

[{"name":"Football"},{"name":"Badminton"},{"name":"Running"}]

Как я могу изменить это, чтобы получить такие значения, как Football, Badminton, Running?

Answer 1

Ваш текущий лог c строит строку JSON из массива hobbies. Чтобы получить желаемый результат, вы можете использовать map() для создания массива имен хобби, которые затем вы можете join() вместе сформировать в одну строку:

let data = {"details":{"id": 10,"name": 'John Doe',"hobbies": [{"id": 1,"name": "Football"},{"id": 2,"name": "Badminton"},{"id": 3,"name": "Running"}],"dob": '1989-12-31'}}

$('#hobbies').val(data.details.hobbies.map(o => o.name).join(', '));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="hobbies" size="25" />

Также обратите внимание, что в вашем объекте data отсутствуют некоторые кавычки вокруг свойств name и dob, но я предполагаю, что это просто опечатка в вопрос в противном случае вы не получите никакого вывода.

Answer 2

Лучшее решение:

$.ajax({
  type: 'POST',
  url: "{{ route('askdata') }}",
  dataType: 'json',
  data: { 'id': $('#member_id').val(), },
  success: function(data) {
    const { details: {id, name, dob, hobbies} } = data
    $('#id').val(id);
    $('#name').val(name);
    $('#dob').val(dob);
    $('#hobbies').val(JSON.stringify(hobbies.map(hobby => {
      return {name: hobby.name}
    })));
  }
});