首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >从零开始学习React-解析json、渲染数据(六)

从零开始学习React-解析json、渲染数据(六)

作者头像
王小婷
发布于 2019-11-10 15:47:21
发布于 2019-11-10 15:47:21
3.8K00
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

在上一节里面,从零开始学习React-axios获取服务器API接口(五)我们请求的api是一个天气的api,这一节是如何获取数据,进行解析,并且渲染到前端。

步骤

1:打印json数据,查看数据格式

为了方便查看,我把json数据放在了编辑器里面,对这个json进行解析。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "code": 200,
    "msg": "成功!",
    "data": {
        "yesterday": {
            "date": "5日星期二",
            "high": "高温 21℃",
            "fx": "北风",
            "low": "低温 14℃",
            "fl": "\u003c![CDATA[\u003c3级]]\u003e",
            "type": "晴"
        },
        "city": "上海",
        "aqi": null,
        "forecast": [
            {
                "date": "6日星期三",
                "high": "高温 20℃",
                "fengli": "\u003c![CDATA[\u003c3级]]\u003e",
                "low": "低温 16℃",
                "fengxiang": "东北风",
                "type": "多云"
            },
            {
                "date": "7日星期四",
                "high": "高温 19℃",
                "fengli": "\u003c![CDATA[3-4级]]\u003e",
                "low": "低温 14℃",
                "fengxiang": "东北风",
                "type": "多云"
            },
            {
                "date": "8日星期五",
                "high": "高温 19℃",
                "fengli": "\u003c![CDATA[3-4级]]\u003e",
                "low": "低温 12℃",
                "fengxiang": "北风",
                "type": "多云"
            },
            {
                "date": "9日星期六",
                "high": "高温 19℃",
                "fengli": "\u003c![CDATA[\u003c3级]]\u003e",
                "low": "低温 13℃",
                "fengxiang": "东北风",
                "type": "晴"
            },
            {
                "date": "10日星期天",
                "high": "高温 22℃",
                "fengli": "\u003c![CDATA[3-4级]]\u003e",
                "low": "低温 13℃",
                "fengxiang": "西风",
                "type": "多云"
            }
        ],
        "ganmao": "天气较凉,较易发生感冒,请适当增加衣服。体质较弱的朋友尤其应该注意防护。",
        "wendu": "19"
    }
}

现在我们的目的是要取到"forecast"这个数组里面的所有日期date,并且循环遍历,渲染在页面。

上一节已经成功请求,在打印的时候,(这里我分别打印一下responseresponse.data.data.yesterdayresponse.data.data.forecast,对比一下)先查看一下json的格式。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(response);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 console.log(response.data.data.yesterday);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(response.data.data.forecast);
2:空数组接收数据

this.state里面写一个list:[]空数接收数据。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
list:[]
3:赋值

数据接收成功之后,也能在控制台打印了,这个时候需要对数据进行处理赋值,把打印的数据赋值给list

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//用到this需要注意指向,箭头函数
    this.setState({
    list:response.data.data.forecast
    })

因为会用到this需要注意指向,所以把axios成功接收数据的函数改成箭头函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.then((response) =>{
    console.log(response);
    console.log(response.data.data.forecast);
    //用到this需要注意指向,箭头函数
    this.setState({
    list:response.data.data.forecast
    })
  })
4:渲染在视图层

用map方法对数组进行循环,并且在标签里面进行渲染。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<ul>
    {/* 对数组进行循环 */}
    {
        this.state.list.map((value,key)=>{
          return<li  key={key}>{value.date}</li>
        })
    }
</ul>

效果:点击按钮请求的时候,会将接口数据里面的内容渲染在界面。

参考代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React  from 'react';
import axios from 'axios'
class Axios extends React.Component {
    //构造函数
    constructor() {
        super();
        //react定义数据
        this.state = {
        list:[]
        }
    }
    //请求接口的方法
    getData=()=>{
    var  api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';
   
   axios.get(api)
  .then((response) =>{
    //console.log(response);
    console.log(response.data.data.yesterday);
    //用到this需要注意指向,箭头函数
    this.setState({
    list:response.data.data.forecast
    })
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  });
    }
    render() {
        return (
        <div> 
        <h2>axios获取数据</h2>
        <button onClick={this.getData}>获取api接口</button>
<ul>
    {/* 对数组进行循环 */}
    {
        this.state.list.map((value,key)=>{
          return<li  key={key}>{value.date}</li>
        })
    }
</ul>
        </div>
        )
    }
}
export default Axios;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
语音控制化繁为简,让你在VR中的交互方式更自然
带上VR头显,转动头部寻找有效的文字信息,再控制手柄一一删选,确认最终选项,这是现阶段VR中最常见的一种交互方式,但操作复杂,且不方便,并不符合VR所想带给玩家的那种自然感与沉浸感。在VR交互方面,目
VRPinea
2018/05/16
2.1K0
数字未来设计趋势|交互篇
回顾互联网发展历程,从桌面端拨号上网到高速5G的移动互联网,随时随地互联互通对现实生活的影响力也逐步提升,虚拟与现实的距离也逐渐缩小。未来数字世界在沉浸感、参与度、永续性等方面对体验提出了更高的要求。
晓吾
2022/04/28
7890
数字未来设计趋势|交互篇
2021-2022 设计趋势ISUX报告·数字未来篇
背景 回顾互联网发展历程,从桌面端拨号上网到高速5G的移动互联网,随时随地互联互通对现实生活的影响力也逐步提升,虚拟与现实的距离也逐渐缩小。未来数字世界在沉浸感、参与度、永续性等方面对体验提出了更高的要求。本文将从虚拟世界的视角,对设计挑战和机遇进行总结和预测。 电影《头号玩家》里的“绿洲”描绘了一个庞大的虚拟数字世界,在这里人们用数字化身来控制、并相互竞争以提高自己的地位,这被视为未来虚拟世界该有的样子。不过目前落地概念是由Roblox在招股书里描述的8个关键词:身份,朋友,沉浸感,多样性,低延迟,
腾讯ISUX
2022/03/29
8750
被全球大作信赖的语音服务GME,助力出海游戏粘住全球玩家
游戏内置语音,已经成为游戏不可或缺的功能之一。玩家通过游戏内置语音与队员/好友沟通,加强团队操作协同,大幅提升沉浸式游戏体验、对战质量、玩家粘性、游戏社交性。因此,在游戏出海发行的趋势下,选择一款全球服务的游戏语音互动服务提供方至关重要,从而保障游戏玩家在世界各地都能拥有极致流畅的游戏语音体验。 服务好游戏的全球语音互动场景,有以下 5 大挑战:全球顺畅通信有挑战、海外布点服务器成本高、海外玩家机型众多、海外合规政策复杂、海外玩家语种多沟通难。「腾讯游戏多媒体引擎 GME」助力游戏开发者轻松搭建全球语音互动
腾讯游戏多媒体引擎GME
2022/08/16
1.3K0
被全球大作信赖的语音服务GME,助力出海游戏粘住全球玩家
Web与人工智能时代
摘要 “人工智能”一词最初是在1956年Dartmouth学会上提出的。从那以后,研究者们发展了众多理论和原理,人工智能的概念也随之扩展。人工智能(Artificial Intelligence)英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支,它企图了解智能的实质,并生产出一种新的能以人类智能相似的方式做出反应的智能机器,该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来,理论和技
IT大咖说
2018/04/03
1.7K0
Web与人工智能时代
【AGI-Eval行业动态】OpenAI 语音模型三连发,AI 语音进入“声优”时代
美东时间 3 月 20 日,OpenAI 发布了三款全新语音模型,分别是自动语音识别模型(ASR) GPT - 4o Transcribe 和 GPT - 4o Mini Transcribe,以及语音合成模型(TTS) GPT - 4o Mini TTS。
AGI-Eval评测社区
2025/04/08
3770
【AGI-Eval行业动态】OpenAI 语音模型三连发,AI 语音进入“声优”时代
被全球大作信赖的语音服务GME,助力出海游戏粘住全球玩家
游戏内置语音,已经成为游戏不可或缺的功能之一。玩家通过游戏内置语音与队员/好友沟通,能够加强团队操作协同,大幅提升沉浸式游戏体验、对战质量,增强游戏粘性及社交性。因此,在游戏出海发行的趋势下,选择一款全球服务的优质游戏语音互动服务提供方,保障游戏玩家在世界各地都能拥有极致流畅的游戏语音体验至关重要。
腾讯云音视频
2023/08/11
4300
被全球大作信赖的语音服务GME,助力出海游戏粘住全球玩家
微软和谷歌:宿命对手的 AI 竞赛
微软和谷歌都相信,未来将是人工智能的世界。这两家公司有不同的传统,也有差异化的竞争优势。而新一轮的人工智能产业竞赛,有一个显著的特点是各公司不再在同一个切入口角逐,而是基于自身在此前的发展中积累的优势,选择一个入口进军人工智能行业。那么微软和谷歌,它们到底打算怎么做? 未来,机器人就是应用程序,人工智能将会进入我们的生活,微软现任CEO萨蒂亚·纳德拉在今年的微软Build世界开发者大会上说。 这不由得让人想到微软对家用电脑的颠覆。微软在20世纪80年代凭借MS-DOS在家用电脑操作系统上崭露头角,成
新智元
2018/03/15
9490
微软和谷歌:宿命对手的 AI 竞赛
微软亚洲研究院副院长周明:微软的 NLP 帝国
【新智元导读】 微软几乎所有和 AI 相关的重要产品,背后都体现了 NLP 技术的重要性,这也是微软亚洲研究院深耕已久的领域。微软亚洲研究院副院长、ACL主席周明博士以《自然语言处理前沿技术》为主题,分享了微软对包括神经网络翻译、聊天机器人、阅读理解等板块在内的 NLP 领域的思考,并接受了新智元等媒体的采访。周博士指出,“语言智能是人工智能皇冠上的明珠”,他认为目前 NLP 技术的发展呈现出六大趋势,同时为大家阐述了未来的 NLP 技术的六大研究方向。 自然语言处理对于微软有多重要? 微软几乎所有和 AI
新智元
2018/03/28
1.3K0
微软亚洲研究院副院长周明:微软的 NLP 帝国
2025语聊系统源码开发深度解析:WebRTC与AI降噪技术如何重塑语音社交体验
随着 5G 技术普及和 Z 世代社交需求升级,语音语聊系统源码 已从早期的简单语音群聊进化为融合实时互动、场景化服务的综合性平台。根据行业数据,2024 年国内语聊赛道同比增长 21%,海外市场如中东、东南亚等地的语音社交用户规模持续扩大。在技术实现层面,语音语聊系统开发需重点关注以下核心方向:
山东布谷科技_孙哥
2025/05/23
1560
2025语聊系统源码开发深度解析:WebRTC与AI降噪技术如何重塑语音社交体验
微软首位华人“全球技术院士”黄学东:10个神经网络造就工程奇迹
【新智元导读】微软语音识别技术24年老将黄学东近日被评为“微软全球技术院士”,成功摘下这一微软技术的“桂冠”。 黄学东于1993年加入微软。1995年,黄学东最终把洪小文也拉入微软。黄学东还曾在Bing工作,一直跟随沈向洋博士。接受新智元的专访时,他谈到了去年微软对话语音识别词错率低至5.9%背后的故事。 同时,黄学东认为语音识别的下一个大难关是语义理解,目前看来最有希望的路线是 LSTM + Attention。 黄学东,微软语音识别技术 24 年老将,IEEE/ACM 双科院士,微软深度学习工具包CNT
新智元
2018/03/27
1.4K0
微软首位华人“全球技术院士”黄学东:10个神经网络造就工程奇迹
针对VR系统的虚拟环境操纵攻击
虚拟现实 (VR) 已进入人们的生活。 虽然围绕 VR 和特别是沉浸式 VR 的兴奋不断增加,但必须关注这些平台的安全性。 虽然对于安全研究人员来说,沉浸式 VR 需要安全是显而易见的,但在探索沉浸式对人的影响时,先前的工作并没有以系统的方式对其进行检查。 本文工作不仅创造和假设潜在的 VR 攻击,而且还实施它们。 此外,通过一项人类参与者欺骗研究说明,确实能够在物理空间中将 VR 用户移动到攻击者喜欢的位置,而无需他们的知识或同意。 希望这项工作能促进该领域未来的研究,尤其是因为沉浸式 VR 对其用户具有心理和生理影响。
CDra90n
2023/06/28
5050
针对VR系统的虚拟环境操纵攻击
让 Agent 具备语音交互能力:技术突破与应用前景(16/30)
在当今数字化时代,人机交互方式正经历着深刻的变革。从早期的命令行界面到图形用户界面,再到如今日益普及的语音交互,人们对于与机器沟通的便捷性和自然性有了更高的追求。Agent 作为一种能够自主执行任务、与环境进行交互的智能实体,赋予其语音交互能力具有重要的现实意义和广阔的应用前景。这不仅可以提升用户体验,使人们能够更加自然、流畅地与 Agent 进行沟通,还能拓展 Agent 的应用场景,如智能家居、智能客服、智能车载系统等领域,让智能服务更加贴近人们的生活和工作。
正在走向自律
2025/01/02
5010
让 Agent 具备语音交互能力:技术突破与应用前景(16/30)
纷纷入局VR/AR的国内外零售巨头们,今年还好吗?
7月中旬,小编着重为大家介绍了零售巨头亚马逊在VR/AR方面的部分动作。例如,在印度开设11家VR快闪店,试水未来全新购物体验;在圣地亚哥国际动漫展上搭建5574平方米的场地,推出史上最大规模VR体验;以及其就VR+新零售的相关布局。
VRPinea
2018/09/28
6760
未来5-10年,NLP将走向成熟
近日,微软亚洲研究院(MSRA)副院长周明在「自然语言处理前沿技术分享会」上,与大家讲解了自然语言处理(NLP)的最新进展,以及未来的研究方向,以下内容由CSDN记者根据周明博士的演讲内容编写,略有删减。 周明博士于1999年加入微软亚洲研究院,不久开始负责自然语言研究组。近年来,周明博士领导研究团队与微软产品组合作开发了微软小冰(中国)、Rinna(日本)、Zo(美国)等聊天机器人系统。周明博士发表了120余篇重要会议和期刊论文(包括50篇以上的ACL文章),拥有国际发明专利40余项。 MSRA在机器翻
CSDN技术头条
2018/02/12
1.1K0
未来5-10年,NLP将走向成熟
微软语音AI技术与微软听听文档小程序实践 | AI ProCon 2019
【导语】9 月 7 日,在CSDN主办的「AI ProCon 2019」上,微软(亚洲)互联网工程院人工智能语音团队首席研发总监赵晟、微软(亚洲)互联网工程院 Office 365资深产品经理,Office 小程序负责人张鹏共同发表《微软语音AI与微软听听小程序实践》的主题演讲,分享微软人工智能语音的技术以及微软听听小程序的落地实践。
AI科技大本营
2019/10/08
2K0
微软语音AI技术与微软听听文档小程序实践 | AI ProCon 2019
在库克的带领之下,苹果为VR/AR领域打了一剂强心针
WWDC 2017于今日凌晨1时(北京时间)在美国加州圣何塞麦克恩利会议中心举行。在本届WWDC上,苹果一口气公布了许多新内容,除了系统软件方面的更新与升级,在硬件方面也推出了多款新品,如iPad、i
VRPinea
2018/05/16
8790
投融资汇总 | 本周(10.29-11.04)旷视科技创下AI融资金额新纪录
AI创企融资金额再创新高,3R(VR、AR、MR)融资事件比之上周有所增加。 本周硬科技领域投融资事件共36起,其中人工智能领域占比最多,共有23起融资事件;3R(VR/AR/MR)发生5起融资事件,新能源发生2起融资事件和1起收购事件,物联网有2起融资事件,而未来医疗、新材料、基因工程则分别有1起融资事件。 在本周人工智能领域的投融资事件中,最引人注意的是旷视科技获得了4.6亿美元的C轮融资,创下了AI创企融资额度的最新记录。与此同时,据相关知情人透露,依图科技也获得了新一轮融资,不过,因为这一消息还未得
镁客网
2018/05/30
6090
Gamescom 2018|德国科隆游戏展首日,NVIDIA等大厂VR/AR动态频发
硬件厂商NVIDIA、戴尔、Psychsoftpc,以及游戏厂商暴雪、Wargaming、索尼、网易等,均带来VR/AR相关新品/游戏体验。
VRPinea
2018/09/28
7440
Google VS 亚马逊 VS 微软,机器学习服务选谁好?
译者 | reason_W 编辑 | Just 对大多数企业来说,机器学习听起来就像航天技术一样,属于花费不菲又“高大上”的技术。如果你是想构建一个 Netflix 这种规模的推荐系统,机器学习确实是这样的。(注:Netflix是美国流媒体巨头、世界最大的收费视频网站,曾于 2017 年买下《白夜追凶》全球播放权。)但受万物皆服务(everything-as-a-service)这一趋势的影响,机器学习这一复杂的领域也正在变得越来越接地气。所以现在哪怕你只是一个数据科学领域的新手,并且只想实现一些很容易
AI科技大本营
2018/04/26
2.1K0
Google VS 亚马逊 VS 微软,机器学习服务选谁好?
推荐阅读
相关推荐
语音控制化繁为简,让你在VR中的交互方式更自然
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档