在 ReactJS 中从 JSON 解析数据

Posted 2023-02-22

【中文标题】在 ReactJS 中从 JSON 解析数据

【英文标题】：Parse data from JSON in ReactJS

【发布时间】：2015-12-23 23:42:04

【问题描述】：

我有这样的数据：

  "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 文件中的数据吗？

【问题讨论】：

使用 ajax 获取文件。 jQuery 有一个 getJSON 命令

你能给我一个使用 AJAX 的例子吗？使用 ReactJS，我必须用 JSX 编写

你的代码是否使用了关键字'fetch'？

【参考方案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

【讨论】：

我以为 React 存在于 JSX 中？！

不，React 是用 JavaScript 编写的。你的反应代码也是 JavaScript。 （因此您所有的文件名都以 .js 结尾）您将 jsx 放入 react 中。你的反应代码中的 等是 jsx。这也被翻译成 JavaScript。

@necroface 如果您对答案感到满意，请将此答案标记为“已接受”:)