获取嵌套的对象的值

最新推荐文章于 2024-01-11 09:34:52 发布

原创最新推荐文章于 2024-01-11 09:34:52 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种将接口请求数据在前端进行字段展示的方法，通过具体示例演示了如何获取并展示数据的id和value，使用jQuery进行DOM操作。

需求：把接口请求回来得数据按照需要的字段进行展示，我这里展示某个字段的value和id演示

页面展示：

控制台输出：

代码：

<body>
        <div id="box">标题：</div>
        <div id="box1">标题1：</div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        let arr={f1:{id:"f1",value:"11"},f2:{id:"f2",value:"22"},f3:{id:"f3",value:"33"}};//接口请求得数据
        let data=[];//保存在前端
        for(let i in arr){
            data[i]=arr[i]
        }
        console.log("data  ",data)
        console.log("data.f1  ",data.f1)
        console.log("data.f1.value   ",data.f1.value)
        $("#box").append(data.f1.id)
        $("#box1").append(data.f1.value)

    </script>
</body>

代码得海洋有些深，我这还不会游泳，就带着游泳圈，还要带个打气筒，时不时打点气，不让自己沉下去。
希望通过我们得交流和学习，能够慢慢有艘船，在大海中航行，不用为了活下去而忽略海上得风景，其实慢慢成长我们会发现，大海，真是个神秘得地方。
学习使我们优秀，我们一起加油吧！