html页面获取map的值,vue获取map集合中的key、value值
背景:前端接收后端返回的list集合,并将该集合展示在页面。//例如:let_list=[{"name":"小一","age":10,"id":1},{"name":"小二","age":15,"id":2},{"name":"小三","age":9,"id":3}]方案一,直接在HTML代码中使用v-for、Object.key、Object.value来渲染页面{{_key...
背景:前端接收后端返回的list集合,并将该集合展示在页面。//例如:
let _list = [{"name":"小一", "age":10, "id":1},{"name":"小二", "age":15, "id":2},{"name":"小三", "age":9, "id":3}]
方案一,直接在HTML代码中使用v-for、Object.key、Object.value来渲染页面
{{_key + " : " + Object.value(map)[index]}}
注:如果是使用axios进行异步请求,需要注意的是数据还未返回,界面就已经开始渲染,导致此时的_list=[],前端界面控制器会出现错误提示,原因是Object.key(obj)和Object.value(obj)中的obj不能为null或undefined。
方案二,在js部分对集合进行处理,使用到Object.entries枚举方法let newList = [];let _length = null != _list ? _list.length : 0;for(let i = 0; i
Object.entries(_list[i]).forEach( label=>{let [_key , _value] = label;
newList.push({_key , _value});});}this._list = newList;
前端html代码稍微发生变化
{{map._key + " : " + map._value}}
这样就避免了后端数据未发送到前端时,前端进行渲染,导致Object.key等方法报错的问题。
更多推荐
所有评论(0)