在 ReactJS 中解析来自 JSON 的数据

IT技术 json parsing reactjs fetch
2021-04-26 10:28:30

我有这样的数据:

{
  "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
    }
  ]
}

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

1个回答

React 存在于 JavaScript 中。所以解析一个 JSON 字符串是通过以下方式完成的:

var myObject = JSON.parse(myjsonstring);

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

你可以用fetch()这个。参见例如
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://davidwalsh.name/fetch
https://blog.gospodarets.com/fetch_in_action