复杂对象的遍历(个人笔记)

来源：互联网发布：图的基本算法编辑：程序博客网时间：2024/06/14 04:43

现在后端大哥返回一组数据，需求是将每个组的成员头像取出显示

结构如下;

data:{rooms: {"1@chatroom": {"members" : { "wxid_1": {"name": "名字1", "headimgurl": "headimgurl1"}, "wxid_2": {"name": "名字2", "headimgurl": "headimgurl2"}, ...},"chatroomnick" : "群名"},"2@chatroom": {"members" : { "wxid_1": {"name": "名字1", "headimgurl": "headimgurl1"}, "wxid_2": {"name": "名字2", "headimgurl": "headimgurl2"}, ...},"chatroomnick" : "群名"},"3@chatroom": {"members" : { "wxid_1": {"name": "名字3", "headimgurl": "headimgurl3"}, "wxid_2": {"name": "名字2", "headimgurl": "headimgurl2"}, ...},"chatroomnick" : "群名"},...}}

思路是将每组的member对象取出放进数组中，待用

 // 存放头像的数组    var headArray = [];    // 渲染函数    function createRoomsList(data) {        var rooms = data.rooms;        var roomsList = "";        var nulltip = "<p style='text-align:center;padding:5% 0;color:#565656'>开通列表为空</p>";        // 数据为空        if (data == "") {            $('.liveRooms').append(nulltip);        }        for (var roomid in rooms) {            if (rooms[roomid].chatroomnick !== null) {                headArray.push(rooms[roomid].members);                // 填充数组列表                roomsList += `<li class='room' roomid=${roomid}>\                              <div class='grouphead'>\                              </div>\                              <span>${rooms[roomid].chatroomnick}</span>\                              </li>`;            }        }        // 渲染文字        $('.liveRooms ul').html(roomsList);        for (var i = 0; i < headArray.length; i++) {            for (var wxid in headArray[i]) {                // 头像为空不显示                if (headArray[i][wxid].headimgurl !== null) {                    // 渲染头像                    $('.grouphead').eq(i).append("<img src=" + headArray[i][wxid].headimgurl + ">");                }            }        }

利用for ..in..用属性遍历对象，

大功告成,写的粗糙，各位大神不吝赐教。

阅读全文

0 0