后台返回的json到前台取值为undefined

最新推荐文章于 2024-05-12 20:50:04 发布
最新推荐文章于 2024-05-12 20:50:04 发布
阅读量534 收藏 7
点赞数 6
文章标签： json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73056048/article/details/134934793
版权

前台

后台

结果

可以看到我们后台已经将对象转换为了json字符串，前台想要使用就需要将他转换为js对象

使用eval()方法，且参数只能是字符串

修改一下前台代码

注意格式：eval("("+data+")")，它是在括号中又写了一个括号，最中间是参数

结果

已经可以取值了，且控制台也是一个json对象

AAACod
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
flash_unde_noaxu
02-18
flash_unde_noaxu
unDE-开源
06-29
该项目的第一个目标是为不同开源项目中使用的许多算法和 API 收集文档。 第二个目标是开发具有最大组件集成度和使用新界面创意的桌面环境。
关于前台获取到的后台json对象取值时undefined的解决方法
热门推荐
qq_29465867的博客
09-18 1万+
最近在获取后台传递到前台 的json对象时，总是undefined，以前没遇到这种情况，检查多遍发现都没有问题，打印整个返回值也是json对象，但是获取里面内容时还是undefined，经查阅资料，原来是格式问题，后台虽然返回的是json串，但是不是json对象，因此需要在后台加上header('Content-type: application/json');
jason 获取数据时显示undefined错误
我的博客
04-08 938
用json.js提供的JSON.parse(string)函数将字符串转化为对象，这样才可以获取对象的属性值
后端传了JSON数据但是前端undifinded
weixin_47129439的博客
03-30 2742
后端传了JSON数据但是前端undifinded，可能的情况： （1）前端取的和后端传的名字不对应，比如前端传了一个JsonObject格式的，传之前put("data",data)，但是后端success（success:function(response)）方法取的时候却用了response.list就不对，必须是response.data才能拿到这个数据 （2）可能是数据库中的表格某一行某一字段为空值，报错被捕捉但是没抛出， 导致前端根本没接到数据。这时候去表中把那些为字段格中提示：(null)的
ajax获取json数据为undefined -- 问题解析
ShameYang的博客
09-17 299
今天在用 AJAX 实现搜索联想功能时，联想的全是 undefined…于是 debug 后发现前端 ajax 获取的 json 数据有问题！
json对象控制台可以打印，取对象属性值时确为undefined
m0_72929120的博客
08-31 225
【代码】json对象控制台可以打印，取对象属性值时确为undefined。
接口显示返回值正常，但是拿到的值却是undefined？
yc1425869600的博客
06-25 1230
原因是utils/request.js方法限制了接口反参code值的判断，当code不等于200时（根据代码中限制），及时接口有数据，会有被影响到。preview有返回的数据，但是打印response却是undefined。解决方法：让后端修改code值，为200正常获取到数据。上图这是后端修改之后，原本code：1。
js前端获取后台对象直接输出有值，但取对象属性为undefined的问题
Mr_xiaoerjun的博客
12-22 7064
这是我遇到的问题 关于这个问题。我认为还是要严谨编码的好。。 因为在后台我使用了@RestController，传到前端的值为json格式，所以正常能输出却是获取不到的，正确的做法应该使用 var res = JSON.parse(xxx); 在前端转换一下即可 PS：我在前端获取属性的方式也没对，因为返回了list，所以需要遍历一下，或者直接指定下标获取属性 所以实际上应该是这样，无语。。 var res = JSON.parse(http.responseText); conso.
aspx后台传递Json到前台的两种接收方法推荐
10-22
下面小编就为大家带来一篇aspx后台传递Json到前台的两种接收方法推荐。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Ajax返回的json遍历取值并显示到前台的方法
10-18
今天小编就为大家分享一篇Ajax返回的json遍历取值并显示到前台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ajax获取json数据为undefined原因分析
12-12
Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，...
如何处理后台向前台传递的json数据
10-15
主要介绍了如何处理后台向前台传递的json数据,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
解决：关于ssm框架前端ajax请求，后端返回数据正常，而前端接收到的数据为undefined的情况
 
09-20 5437
记录一个菜鸟用周末两天时间爬出的一个坑，我xx真的服了。 以下描述内容不够严谨，过程就是这么个过程，细节不讲。 内容用于个人学习记录和交流，如有问题还请批评指正。 问题描述： 最近学习的ssm框架，其中比较重要的功能就是默认集成了jackson，当使用@ResponseBody注解标注的controller方法，该方法的返回值不解析成地址，交给请求体发送回前端，如果返回值是对象，那么jackson会自动将对象转换成json字符串。 这个坑是如何踩到的？ 在前端通过ajax向服务器发送请求，过程完美
属性值是变量时獲取json值為undefined_一篇文章看懂变量提升(hoisting)
weixin_39626298的博客
12-03 163
前沿大家对变量提升(hoisting)一定不陌生了，这篇文章希望可以建立一个系统的规则，以后碰到变量提升，可以重新看这篇文章，根据文中的规则找到答案。最终，我们可以记住这个规则，很自然的理解变量提升。例子相信大家对这个例子不陌生了：a = 2; var a; console.log( a ); /// 2 为什么这段话a 在声明之前就可以赋值了呢？再看下这个例子：console.log( a ...
关于json数据获取为undefined
爱吃猫的鱼
09-16 7810
一只小白的记录 在练习jq的ajax请求时候 遇到如下问题 1，请求到之后获取到的为object 这个问题 这个还是比较好解决的 只需要将对象转化为json数据 利用JSON.string(v.result)就好了 2.解析后出现如下 当获取content时候却出现了undefined之后看了一些大佬的方法利用result = eval("(" + result + “)”) 这下就好了 之后去补习了一下，eval()它可以执行某一个js代码也可以计算某个字符串。之后看到有大佬说可以用JSON.p
GO: json 处理
Big_YiFeng的博客
05-11 599
1、用interface{}需要注意， JSON 里的数字默认都会转成 Golang 的 float64 类型，字符是string,使用方式为。如果不想用结构体，怎么办，如api接收过来的参数，不确定json串里面有什么数据类型，可通过interface{}实现。2、golang 里json不是字符串而是 []byte类型，如果想用字符串可以用string()转。需要引入"encoding/json"包。
consul启动Error_server_rejoin_age_max (168h0m0s) - consider wiping your data dir
最新发布
码农的专栏
05-12 261
refusing to rejoin cluster because server has been offline for more than the configured server_rejoin_age_max (168h0m0s) - consider wiping your data dir
vue根据后台返回json 动态生成列表
09-16
### 回答1： 您好！如果您需要使用Vue根据后台返回的JSON数据生成动态列表，可以使用Vue的v-for指令结合数组方法，如下所示： 1.在Vue组件的data选项中定义一个数组用于存储JSON数据，例如： ``` data() { return { items: [] } } ``` 2.在Vue组件的mounted钩子函数中，使用axios或其他工具从后台获取JSON数据并将其存储在上述定义的数组中，例如： ``` mounted() { axios.get('/api/items').then(response => { this.items = response.data; }) } ``` 3.在Vue组件的模板中，使用v-for指令结合数组方法将JSON数据动态生成列表，例如： ``` <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> ``` 在上述示例中，v-for指令用于遍历items数组，生成包含每个item对象的li元素，其中:key属性用于为每个列表项指定唯一的key值，以提高性能。 希望这能够帮助您！ ### 回答2： Vue中可以根据后台返回的JSON动态生成列表。实现这个功能的关键是将后台返回的JSON数据以合适的格式绑定到Vue组件中的数据属性，然后使用循环指令（v-for）来遍历这个数据属性，生成相应的列表。 具体来说，可以按照以下步骤实现动态生成列表的功能： 1. 在Vue组件中定义一个data属性，用于存储后台返回的JSON数据。例如，可以定义一个名为"listData"的数组属性。 2. 在Vue的生命周期钩子函数中，使用异步请求（如axios、fetch等）从后台获取JSON数据，并将返回的数据赋值给"listData"属性。例如，在created钩子函数中可以使用axios发送异步请求，并在请求成功后将返回的JSON数据赋值给"listData"属性。 3. 在Vue组件的模板中，使用v-for指令遍历"listData"属性，生成相应的列表项。例如，可以使用如下代码片段遍历"listData"属性并生成一个无序列表： ``` <ul> <li v-for="item in listData">{{ item }}</li> </ul> ``` 上述代码中，v-for指令会遍历"listData"属性中的每个元素，依次生成相应的<li>元素。其中，"item"是一个临时变量，表示当前遍历的元素。 4. 最后，在Vue组件中进行渲染，即将组件实例挂载到DOM元素上，这样就能够看到动态生成的列表了。 综上所述，通过将后台返回的JSON数据绑定到Vue组件的数据属性中，并使用v-for指令遍历这个数据属性，就能够动态生成列表了。只需在适当的生命周期钩子函数中获取后台数据并赋值给数据属性，然后在模板中使用v-for指令生成相应的列表项即可。 ### 回答3： 在Vue中，我们可以根据后台返回的JSON数据动态生成列表。首先，我们需要通过Vue的数据绑定将后台返回的JSON数据存储在Vue实例的data属性中。假设后台返回的JSON数据包含一个数组，每个数组元素代表一个列表项，如下所示： ```javascript data: { items: [] // 存储后台返回的JSON数据 } ``` 接下来，我们可以使用Vue的v-for指令来遍历items数组，并将每个数组元素渲染为具体的列表项。在模板中，我们可以使用类似下面的代码来生成列表： ```html <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> ``` 上面的代码中，v-for="item in items"表示遍历items数组，将每个数组元素赋值给变量item；:key="item.id"用于给每个列表项指定一个唯一的键，以优化列表渲染；{{ item.name }}表示渲染item对象中的name属性值。 当后台返回的JSON数据改变时，Vue会自动检测到data属性的变化并重新渲染列表，从而实现动态生成列表的效果。 除了简单的列表渲染外，我们还可以根据需要对列表进行排序、过滤等操作。Vue提供了强大的计算属性和过滤器来帮助我们实现这些功能。 总结起来，我们只需要使用Vue的数据绑定和v-for指令，就可以轻松地根据后台返回的JSON数据动态生成列表。这使得前端开发变得更加简单和高效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值