把接口调出来的数组内容显示在页面上

想要页面用户名后面显示接口调出来的用户数据 

for...in 语句 用于对数组或者对象的属性进行循环操作

用空数组接收 res.obj.records[key].username 中的属性值

 js代码

ajax(service_prefix.aaa, "/aaa/aaa", "post", JSON.stringify(jsondata)).then(result => {
      if (result.status == 200) {
          var arr = [];
          for (var key in res.obj.records) {
            arr.push(res.obj.records[key].username);  
          //将records[].username里面的数据添加到空数组arr里面          
}
          $('#username').text(arr);
      }
    });

html

<p>用户名:<span id="username"></span></p>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然可以,下面是一个简单的示例,使用了React Hook和TypeScript实现列表模糊查询搜索功能: ```typescript import React, { useState } from "react"; interface IData { id: number; name: string; } const data: IData[] = [ { id: 1, name: "Apple" }, { id: 2, name: "Banana" }, { id: 3, name: "Cherry" }, { id: 4, name: "Durian" }, { id: 5, name: "Elderberry" }, ]; const SearchList = () => { const [searchText, setSearchText] = useState<string>(""); const [searchResults, setSearchResults] = useState<IData[]>([]); const handleSearch = (text: string) => { const results = data.filter((item) => item.name.toLowerCase().includes(text.toLowerCase()) ); setSearchResults(results); }; const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { setSearchText(event.target.value); handleSearch(event.target.value); }; return ( <div> <input type="text" placeholder="Search..." value={searchText} onChange={handleInputChange} /> <ul> {searchResults.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); }; export default SearchList; ``` 在这个示例中,我们定义了一个IData接口表示数据类型,然后定义了一个data数组,它包含了我们要搜索的数据。接着,我们使用useState Hook定义了两个状态:searchText和searchResults。searchText用于保存用户输入的搜索文本,而searchResults用于保存搜索结果。handleInputChange回函数在每次搜索文本变更时会被用,它会更新searchText状态,并用handleSearch函数进行搜索。handleSearch函数会根据用户输入的搜索文本,过滤data数组并更新searchResults状态。最后,我们在页面上展示了搜索结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值