解析JSON { "key" : "value" } JQuery

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"}

我完全不知所措。

- RysQ

Answer 1

修复你的数据结构，使其更加友好

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

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>');
});

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

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

- charlietfl

---

我已经接受了Azim的答案，你回复之前就已经接受了。但还是非常感谢你的帮助。我会使用你的解决方案。我应该先考虑这个而不是寻找一种变通的方法。 - RysQ

如果这能更好地帮助您的情况，并且您认为对于未来的读者来说更好，那么更改所选答案是没有问题的。 - charlietfl

Answer 2

遍历对象的所有属性并创建具有id和value的div，然后将其附加到#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>

- Ibrahim Khan

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"
}

- devtye