请问如何让javascript遍历一个从后台传到html上的数组?
时间: 2020-06-09来源:博客园
前景提要
请问如何让javascript遍历一个从后台传到html上的数组?
0 悬赏园豆: 30 [待解决问题] 刚开始自学javascript,请大家多指点。
我的需求是,从后台取一个数组,然后用javascript遍历这个数组,取其中的一些值进行计算。
数组的格式大致是[ {name : a , age : 1} , {name : b , age : 2} , { name : c , age : 3} ]
我用<div>{{my_array}}<div>,然后用getElementById取到了这个元素,它的类型是一个对象。但当我用for ( let array of my_array)时,提示not iterable,我无法遍历它。
我尝试了用.innerText,但获取到的变成了字符串,我依然没办法将字符串转成数组,也尝试了用array.from 或者用split(',')之类的办法,但都没有成功。
我也尝试将将pymysql输出的结果用json.parse转成json格式再读取,同样也是失败了。
能否请大家告诉我,我要怎样遍历这个数组,或者为什么这个对象无法被遍历,或者获取到元素的属性要如何从对象变为数组?
非常感谢! javascript summer59423 | 初学一级 | 园豆: 174
提问于:2020-06-09 11:32 先 parseJson后 然后 打印出来看看 是不是一个对象数组。如果是就可以遍历 去做你的逻辑处理。处理完后 再放到html中展示 – ^keepHungry$ 2个月前 显示帮助
使用"Ctrl+Enter"可进行快捷提交,评论支持部分 Markdown 语法:[link](http://example.com) _italic_ **bold** `code`。
< > 分享
分享您的问题
所有回答(5) 0 既然是從後端取得的資料,為什麼要先放到頁面上?何不直接處理? RosonJ | 园豆:3647 (老鸟四级) | 2020-06-09 11:35 這個數組我需要遍歷它然後把其中一些值使用在函數裡,所以遍歷的過程要放在js裡處理,抱歉可能是我沒有講的很清楚。但還是非常感謝您的回答! 支持( 0 ) 反对( 0 ) summer59423 | 园豆:174 (初学一级) | 2020-06-09 21:51 编辑文本 预览 上传图片
Ctrl+Enter键快速提交 0 后台传过来的会不会只是个字符串格式? 华临天下 | 园豆:1364 (小虾三级) | 2020-06-09 12:00 我查看了获取到的元素,类型是一个object,如果使用innerText,会变成一个字符串,无法转成数组,如果遍历这个字符串,只会获取到每个字符。今天中午自己解决了问题,先使用json.dumps将mysql输出的结果转换成json格式,然后再传递到页面上,获取以后用json.parse转换,就可以遍历了,非常感谢您回答我的问题! 支持( 0 ) 反对( 0 ) summer59423 | 园豆:174 (初学一级) | 2020-06-09 21:55 编辑文本 预览 上传图片
Ctrl+Enter键快速提交 0 原始方法示例:
var arr = [{name:'lili',age:12},{name:'lisi',age:13},{name:'linlin',age:13}];
for(var i=0; i<arr.length;i++){
alert(arr[i].name + "-" + arr[i].age);
} 南小鸟 | 园豆:193 (初学一级) | 2020-06-09 14:27 谢谢您回答我的问题。这个方法我最早就尝试过了,但因为获取的object的长度为零,无法进行遍历,会报not iterable的错。最后自己解决的问题,方法是先使用json.dumps将mysql输出的结果转换成json格式,然后再传递到页面上,获取以后用json.parse转换,就可以用for遍历了。 支持( 0 ) 反对( 0 ) summer59423 | 园豆:174 (初学一级) | 2020-06-09 21:56 编辑文本 预览 上传图片
Ctrl+Enter键快速提交 0 问题已经自己解决了,方法是先使用json.dumps将mysql输出的结果转换成json格式,然后再传递到页面上,获取以后用json.parse转换,就可以用for遍历了。 summer59423 | 园豆:174 (初学一级) | 2020-06-09 21:59 编辑文本 预览 上传图片
Ctrl+Enter键快速提交 0 所以是后台展示到html页面的数组格式不对咯? Not丶see | 园豆:349 (菜鸟二级) | 2020-06-10 17:37 编辑文本 预览 上传图片
Ctrl+Enter键快速提交
清除回答草稿
您需要 登录 以后才能回答,未注册用户请先 注册 。

科技资讯:

科技学院:

科技百科:

科技书籍:

网站大全:

软件大全:

热门排行