从JSON数组中获取元素以显示为文本



我想从JSON对象中得到first_name它有元素数组通过迭代,例如,如果我输入'Ron'它会显示为文本但由于某种原因,我不能显示为文本除非我发送响应this

playerName: nbaPlayer[0]

但是它只显示一个元素作为文本,因为其他元素不在响应

服务器响应输入图片描述

这里是一个代码获取,我使用搜索栏从车把栏搜索first_name


const nbaForm = document.querySelector('form')
const search = document.querySelector('input')
const messageOne = document.querySelector('#player-1')
nbaForm.addEventListener('submit', (event) => {
event.preventDefault()
const playerSearch = search.value
messageOne.textContent = 'Loading...'
fetch('http://localhost:4000/nba').then((response) => {
response.json().then(nbaData => {

if (nbaData.playerName === playerSearch) {
messageOne.textContent = nbaData.playerName
} else {
messageOne.textContent = 'not found'
} 
})
})
})

请求方法

app.get('/nba', (req,res) => {
networkManager.nbaPlayerData((data)=>{
/
var nbaPlayer = []

for(var i=0; i<data.data.length; i++){
nbaPlayer.push(data.data[i].first_name)
}
console.log(nbaPlayer)
res.send({ 
playerName: nbaPlayer
})
})
})

车把文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,  initial-scale=1.0">
<title>NBA</title>
<link rel = "stylesheet" href="/css/style.css"> 

</head>
<body>
<div class="main-content">
<h1>NBA SERVER</h1>
<p>Use this site to get NBA player</p>

<form action="">
<input placeholder="Type a players name">
<button>Search</button>
</form>

<p id="player-1"></p>

<h1>{{playerName}}</h1>
</div>


<script src ="/js/fetch-app.js"></script>
</body>
</html> 

试试这个

fetch('http://localhost:4000/nba').then((response) => {
response.json().then(nbaData => {
var index = nbaData.playerName.indexOf(playerSearch)
if (index !== -1) {
messageOne.textContent = nbaData.playerName[index]
} else {
messageOne.textContent = 'not found'
} 
})
})

获取数组
res.send({ 
playerName: nbaPlayer // nbaPlayer is array
})

但在取回中,你想从简单对象

中获取数据

最新更新