在ReactJS中解析来自JSON的数据

nec*_*ace 18 parsing json fetch reactjs

我有这样的数据:

{
  "movies": [
    {
      "abridged_cast": [
        {
          "characters": [
            "Dominic Toretto"
          ],
          "id": "162652472",
          "name": "Vin Diesel"
        },
        {
          "characters": [
            "Brian O'Conner"
          ],
          "id": "162654234",
          "name": "Paul Walker"
        },
        {
          "characters": [
            "Louie Tran"
          ],
          "id": "162684066",
          "name": "Tony Jaa"
        },
        {
          "characters": [
            "Deckard Shaw"
          ],
          "id": "162653720",
          "name": "Jason Statham"
        },
        {
          "characters": [
            "Luke Hobbs"
          ],
          "id": "770893686",
          "name": "Dwayne \"The Rock\" Johnson"
        }
      ],
      "alternate_ids": {
        "imdb": "2820852"
      },
      "critics_consensus": "",
      "id": "771354922",
      "links": {
        "alternate": "http://www.rottentomatoes.com/m/furious_7/",
        "cast": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/cast.json",
        "reviews": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/reviews.json",
        "self": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922.json",
        "similar": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/similar.json"
      },
      "mpaa_rating": "PG-13",
      "posters": {
        "detailed": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
        "original": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
        "profile": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
        "thumbnail": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg"
      },
      "ratings": {
        "audience_rating": "Upright",
        "audience_score": 88,
        "critics_rating": "Certified Fresh",
        "critics_score": 82
      },
      "release_dates": {
        "theater": "2015-04-03"
      },
      "runtime": 140,
      "synopsis": "Continuing the global exploits in the unstoppable franchise built on speed, Vin Diesel, Paul Walker and Dwayne Johnson lead the returning cast of Fast & Furious 7. James Wan directs this chapter of the hugely successful series that also welcomes back favorites Michelle Rodriguez, Jordana Brewster, Tyrese Gibson, Chris \"Ludacris\" Bridges, Elsa Pataky and Lucas Black. They are joined by international action stars new to the franchise including Jason Statham, Djimon Hounsou, Tony Jaa, Ronda Rousey and Kurt Russell.",
      "title": "Furious 7",
      "year": 2015
    }
  ]
}
Run Code Online (Sandbox Code Playgroud)

我需要解析来自此JSON文件的所有字段中的所有数据.有没有办法在React JS中做到这一点?能否请您建议我从这样的结构化JSON文件中解析数据?

win*_*elt 34

React生活在JavaScript中.因此解析JSON字符串是通过以下方式完成的:

var myObject = JSON.parse(myjsonstring);
Run Code Online (Sandbox Code Playgroud)

如何使用AJAX从某处获取文件是一个不同的问题.

你可以用fetch()它.请参阅
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://davidwalsh.name/fetch
https://blog.gospodarets.com/fetch_in_action

  • 不,React是用JavaScript编写的.您的反应代码也是JavaScript.(因此你的所有文件名都以.js结尾)你把jsx放在里面做出反应.您的反应代码中的<div>等是jsx.这也被翻译成JavaScript. (9认同)