Question

我正在制作自动完成的物品。

这是我的ajax - json - 响应，代表"id":"name"对：

// consloe:
Object {"14":"Mike","15":"John","23":"Drew","45":"Steve","52":"Andrew"}

我来自：

while($row=$result->fetch_array()){
    $output[$row['user_id']] = $row['user'];
}
echo json_encode($output);

我试图为每个配对做<div data-user="id">name</div>。但我无法处理..：/

var results = JSON.parse(data);
$(results).each(function(key, value) {
    $('#results').append('<div class="item">'+ value + '</div>');
})

上面的代码工作正常，而我在json响应中只有name（$output[] = $row['user'];）。

但我需要user_id将其分配到所选选项的输入值。

这就是我现在所怀疑的：

console.log(results);
$(results).each(function(key, value) {
    console.log(key);
    console.log(value);
})

// console:
// Object {"14":"Mike","15":"John","23":"Drew","45":"Steve","52":"Andrew"}
// 0
// {"14":"Mike","15":"John","23":"Drew","45":"Steve","52":"Andrew"}

我完全糊涂了

Answer 1

遍历对象的所有属性，并使用div和id创建value，然后附加到#results。

var json = { "14": "Mike", "15": "John", "23": "Drew", "45": "Steve", "52": "Andrew" };

for (var prop in json) {
   $('#results').append('<div id='+prop+'>'+json[prop]+'</div>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>

Answer 2

修复您的数据结构以使其更友好

每个对象具有相同属性名称的对象数组更为明智（也更常见）

while($row=$result->fetch_array()){
    $output[] =array('id'=>$row['user_id'], 'user'=> $row['user']);
}
echo json_encode($output);

将产生：

[{"id":"14","user":"Mike"},{"id":"15","user":"John"}.......]

现在，当您迭代数组时，您可以在每次迭代中访问相同的属性。通过使用这些属性名称，它也更容易阅读。

$.each(data, function(arrayIndex, userObject){
   $('#results').append('<div data-user="' + userObject.id+'">'+ userObject.user + '</div>');
});

另请注意，数组更易于过滤和排序，并且有许多本机方法可供数组帮助您。

为了简化更新，您还可以使属性名称与后端匹配

Answer 3

所以这是获取你的关键和价值的例子;

检查控制台的结果：JsFiddle - https://jsfiddle.net/5hpr5bhm/

var data = {"14" :"Mike", "15" :"John", "23" :"Drew", "45" :"Steve", "52" :"Andrew"};

for (var key in data) {
    console.log("User " + data[key] + " is" + key); // "User john is 24"
}

解析JSON {“key”：“value”} JQuery

3 个答案: