使用React从JSON获取数组值

我有一个应用程序，允许用户在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

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

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
搜索词：“”，
用户数据：[]
}
}
//从spotify获取数据
getUserData（）{
$.ajax({
网址：'https://api.spotify.com/v1/search?q=“+this.state.searchTerm+”&type=playlist'，
数据类型：“json”，
cache:false，
成功：功能（数据）{
console.log（数据、播放列表、项目）；
this.setState（{userData:data.playlists.items}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
this.setState（{searchTerm:null}）；
警报（错误）；
}.绑定（此）
});
}
handleFormSubmit（搜索术语）{
this.setState（{searchTerm:searchTerm}，function（）{
这是getUserData（）；
});
}
componentDidMount（）{
这是getUserData（）；
}
render（）{
返回(
)
}
}
导出默认应用程序

Songs.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

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

类歌曲扩展组件{
render（）{
返回(
曲目名称：{this.props.userData.Name}

轨道：{this.props.userData.Tracks}
类型：{this.props.userData.Type}

)
}
}
导出默认歌曲

这是一个示例响应的屏幕截图。

---

我应该能够从

图像

数组中获取

名称

，

url

等，但不能循环使用它们。

您需要类似的东西，试试看

    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

在他们身上

---

希望这有帮助

您的数据格式如下：

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

数组（它是一个对象数组），然后在其中使用图像上的另一个映射来获取URL的值

按如下方式编写以访问名称和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>
    )
  }
}

类歌曲扩展组件{
render（）{
返回(
{this.props.userData.map（el=>{
返回(
{el.name}
{el.images.map（img=>{
返回
})}
)
})}
)
}
}

检查工作代码段：

class.Component{
render（）{
返回(
{this.props.userData.map（el=>{
返回(
{el.name}
{el.images.map（img=>{
返回
})}
)
})}
)
}
}
var播放列表={
项目：[
{
名称：‘a’，
图像：[
{
网址：'aa'，
href:'aa'
},
{
url:'ab'，
href:'ab'
},
{
url:'ac'，
href:'ac'
}
]
},
{
名称：‘b’，
图像：[
{
网址：'ba'，
href:'ba'
},
{
网址：'bb'，
href:'bb'
},
{
url:'bc'，
href:'bc'
}
]
}
]
}
ReactDOM.render（，document.getElementById（'app'））

要迭代图像数组并获取URL吗？图像数组的对象不包含我认为的名称。我希望能够获取图像URL以及名称（与图像数组处于同一级别）。@MayankShukla-我希望能够打印名称，在这种情况下，名称应该是“Imagine Dragons Best of”。

userData

是一个对象数组。因此，您不能在

Songs.jsx

文件中以对象表示法访问数组。遍历数组。使用

.map

函数。我发现一个语法错误，无法追踪。我应该能够在

images

数组中获取

url

的值。为了清晰起见，我更新了json的屏幕截图。