js对象小练习

 一：

 代码演示：

  <ul id="app">

  </ul>

let arr = {
	"imgComments":{
		"imgList":[
			{
				"imageId":698391890,
				"content":"操作简单方便，使用舒适感强，声音小?",
				"creationTime":"2018-11-01 23:51:40",
				"nickname":"j***9",
				"productColor":"5050CC",
				"userLevelName":"银牌会员",
				"userClientShow":"来自京东Android客户端",
				},
				{
					"imageId":698391889,
					"content":"还不错，老婆很喜欢",
					"creationTime":"2018-10-05 23:51:40",
					"nickname":"h***2",
					"productColor":"C550C0",
					"userLevelName":"钻石会员",
					"userClientShow":"来自京东iPhone客户端",
				}
			]
		}
	}
    var array = arr.imgComments.imgList;
    var _app = document.getElementById('app')
    for (const item of array) {
        _app.innerHTML +=  `
        <li>
            <span>
                ${item.imageId}
            </span>
            :
            <span>
                ${item.content}
            </span>
            :
            <span>
                ${item.creationTime}
            </span>
            :
            <span>
                ${item.nickname}
            </span>
            :
            <span>
                ${item.productColor}
            </span>
            :
            <span>
                ${item.userLevelName}
            </span>
            :
            <span>
                ${item.userClientShow}
            </span>
        </li>
        `
    }

 二：

 

代码演示：

<ul id="nan">
        <div>男明星:</div>
</ul>
<ul id="nv">
        <div>女明星:</div>
</ul>

<script>
    var names = {
      男明星: [
        { name: "梁朝伟", age: "40" },
        { name: "刘德华", age: "42" },
        { name: "彭于晏", age: "29" },
      ],
      女明星: [
        { name: "刘嘉玲", age: "40" },
        { name: "张敏", age: "41" },
        { name: "张柏芝", age: "30" },
        { name: "朱茵", age: "38" },
      ],
    };
    var nan = names.男明星;
    var nv = names.女明星;
    console.log(nan);
    console.log(nv);
    var _nan = document.getElementById("nan");
    var _nv = document.getElementById("nv");
    for (const key in names) {
      if (key == "男明星") {
        for (const item of nan) {
          _nan.innerHTML += `
        <li>
            <div>
                name -- ><span>${item.name}</span>
                &ensp;&ensp;
                age --><span>${item.age}</span>
            </div>
        </li>
    `;
        }
      }else{
        for (const item of nv) {
          _nv.innerHTML += `
        <li>
            <div>
                name -- ><span>${item.name}</span>
                &ensp;&ensp;
                age --><span>${item.age}</span>
            </div>
        </li>
    `;
        }
      }
    }
  </script>

 三：

代码演示：

<script>
    var user ={
		"employees":[  
                    {
			            "name":"shenmiweiyi",
			            "QQ":306451129,
			            "email":"shenmiweiyi@163.com",
			            "address":
                                [
			                  		{"City":"ZhengZhou","ZipCode":"450000"},
			                  		{"City":"BeiJing","ZipCode":"100000"}
			                	]
			         },
			         {
			            "name":"kehao",
			            "QQ":254892313,
			            "email":"kehao@163.com",
			            "address":
			            [
			                  {"City":"ShangHai","ZipCode":"200000"},
			                  {"City":"GuangZhou","ZipCode":"510000"}
			            ]
			       }
			    ]
        }
        var user1 = user.employees;
		document.write("<ul>");
		user1.forEach(function(obj) {
			document.write("<li>");
			document.write(`名字:${obj['name']}<br>QQ:${obj['QQ']}<br>邮箱:${obj['email']}<br>地址:<br>`);
			var add = obj.address;
			add.forEach(function(obj) {
				document.write(`--城市:${obj['City']}<br>--邮编:${obj['ZipCode']}<br>`);
			})
			document.write("</li>");
		})
		document.write("</ul>");
</script>