React로 JSON에서 배열 값 가져 오기

Question

사용자가 Spotify API에서 아티스트, 앨범 등을 검색 할 수있는 앱이 있습니다. 요청을하고 응답을 얻을 수 있지만 값을 가져 오는 데 어려움이 있습니다. 표시 할 응답.

App.jsx

class App extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     searchTerm: '', 
     userData: [] 
    } 
    } 

    // Get data from spotify 
    getUserData(){ 
    $.ajax({ 
     url: 'https://api.spotify.com/v1/search?q='+this.state.searchTerm+'&type=playlist', 
     dataType: 'json', 
     cache: false, 
     success: function(data){ 
     console.log(data.playlists.items); 
     this.setState({userData: data.playlists.items}); 
     }.bind(this), 
     error: function(xhr, status, error){ 
     this.setState({searchTerm: null}); 
     alert(error); 
     }.bind(this) 
    }); 
    } 
    handleFormSubmit(searchTerm){ 
    this.setState({searchTerm: searchTerm}, function(){ 
     this.getUserData(); 
    }); 
    } 

    componentDidMount(){ 
    this.getUserData(); 
    } 

    render(){ 
    return(
     <div> 
      <Search onFormSubmit = {this.handleFormSubmit.bind(this)} /> 
      <Songs {...this.state}/> 
     </div> 
    ) 
    } 
} 

export default App 

Songs.jsx

class Songs extends Component{ 

    render(){ 
    return(
     <div className="panel panel-default panel-order"> 
      <div className="panel-body"> 
      <div className="row"> 
       <div className="col-md-1"><img src={this.props.userData.images} /></div> 
       <div className="col-md-11"> 
       <div className="row"> 
        <div className="col-md-12"> 
        <span><strong>Track Name: {this.props.userData.name}</strong></span> 
        <br /> Tracks:{this.props.userData.tracks} 
        </div> 
        <div className="col-md-12"> 
        Type: <p>{this.props.userData.type}</p> 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
    ) 
    } 
} 

export default Songs 

이것은 샘플 응답의 스크린 샷이다. , url을 images 배열 등에서 가져올 수는 있지만 루프를 통과 할 수는 없습니다.

Answer 1

데이터의 형식이있다 urls의 값. 이 같은

쓰기는 이름과 URL 값에 액세스하려면 :

class Songs extends Component{ 
    render(){ 
    return(
     <div> 
      {this.props.userData.map(el => { 
       return(
       <div key={el.name}> 
        {el.name} 
        {el.images.map(img => { 
         return <img alt='temp' src={img.url} key={img.url}/> 
        })} 
       </div> 
      ) 
      })} 
     </div> 
    ) 
    } 
} 

가 작업 조각 확인 :

class Songs extends React.Component{ 
 
    render(){ 
 
    return(
 
     <div> 
 
      {this.props.userData.map(el => { 
 
       return(
 
       <div key={el.name}> 
 
        {el.name} 
 
        {el.images.map(img => { 
 
         return <img alt='temp' src={img.url} key={img.url}/> 
 
        })} 
 
       </div> 
 
      ) 
 
      })} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
var playlist={ 
 
    items:[ 
 
    { 
 
     name: 'a', 
 
     images: [ 
 
     { 
 
      url: 'aa', 
 
      href: 'aa' 
 
     }, 
 
     { 
 
      url: 'ab', 
 
      href: 'ab' 
 
     }, 
 
     { 
 
      url: 'ac', 
 
      href: 'ac' 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     name: 'b', 
 
     images: [ 
 
     { 
 
      url: 'ba', 
 
      href: 'ba' 
 
     }, 
 
     { 
 
      url: 'bb', 
 
      href: 'bb' 
 
     }, 
 
     { 
 
      url: 'bc', 
 
      href: 'bc' 
 
     } 
 
     ] 
 
    } 
 
    ] 
 

 
} 
 

 
ReactDOM.render(<Songs userData={playlist.items}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

Answer 2

당신이 뭔가를 필요가

class App extends Component{ 
     constructor(props){ 
     super(props); 
     this.state = { 
      searchTerm: '', 
      userData: [] 
     } 
     } 

     // Get data from spotify 
     getUserData(){ 
     $.ajax({ 
      url: 'https://api.spotify.com/v1/search?q='+this.state.searchTerm+'&type=playlist', 
      dataType: 'json', 
      cache: false, 
      success: function(data){ 
      console.log(data.playlists.items); 
      this.setState({userData: data.playlists.items.map((val) => { 
       name: val.name, 
       href: val.href 
      })}); 
      }.bind(this), 
      error: function(xhr, status, error){ 
      this.setState({searchTerm: null}); 
      alert(error); 
      }.bind(this) 
     }); 
     } 
     handleFormSubmit(searchTerm){ 
     this.setState({searchTerm: searchTerm}, function(){ 
      this.getUserData(); 
     }); 
     } 

     componentDidMount(){ 
     this.getUserData(); 
     } 

     render(){ 
     return(
      <div> 
       <Search onFormSubmit = {this.handleFormSubmit.bind(this)} /> 
       <Songs {...this.state}/> 
      </div> 
     ) 
     } 
    } 

    export default App 

확인을 AJAX 호출 부분을 시도하고 사용자의 요구

에 따라 그것을 조작하고 항목이 JSON 형식이 아닌 경우에 당신은 할 필요가 있습니다

JSON.parse() 

희망이 도움이됩니다. 즉 얻기 위해 이미지에 다른 맵을 사용하여 다음 내부 (이것은 객체의 배열입니다)

playlist:{ 
    items:[ 
    { 
     name: 'a', 
     images: [ 
     { 
      url: 'aa', 
      href: 'aa' 
     }, 
     { 
      url: 'ab', 
      href: 'ab' 
     }, 
     { 
      url: 'ac', 
      href: 'ac' 
     } 
     ] 
    }, 
    { 
     name: 'b', 
     images: [ 
     { 
      url: 'ba', 
      href: 'ba' 
     }, 
     { 
      url: 'bb', 
      href: 'bb' 
     }, 
     { 
      url: 'bc', 
      href: 'bc' 
     } 
     ] 
    } 
    ]  
} 

먼저 당신이 userData 배열을 반복 할 필요가 이름을 얻으려면 :