Question 110994 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Get elements from JSON array to display as a text

So i am trying to get a first_name from JSON object which has array of elements by iterating through it, for example if i type ‘Ron’ it will display as a text but for some reason I can’t get display it as a text unless i send in a respond this `

playerName: nbaPlayer[0]

But it only displays one element as a text since others are not in a response

reponse in a server enter image description here

Here is a code for fetch where i use search bar from handlebars to search for a 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'
            } 
        })
    })
})

request method

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
})
    })
})

handlebars file

<!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>
Tags:

2

Answers


  1. 0

    try this.

    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'
            } 
        })
    })
    Login or Signup to reply.
  2. 0

    You are getting an array from

    res.send({ 
            playerName: nbaPlayer // nbaPlayer is array
})

    but in your fetch, you want to get data as from simple object

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search