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

您当前的逻辑是从hobbies数组构建JSON字符串。要获得所需的输出，可以使用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}
    })));
  }
});

更改AJAX请求中输入值的格式

2 个答案: