React - 將json中的所有數據加載到組件

-1

我正在使用React並嘗試從本地json文件將數據加載到我的組件中。我試圖打印所有信息，包括名稱：值對中的「名稱」（而不僅僅是值），以使其看起來像一個表單。React - 將json中的所有數據加載到組件

我正在尋找最好的方法來做到這一點。我需要解析嗎？我需要使用地圖功能嗎？我是React新手，請向我展示解決方案的代碼。我已經看到類似這樣的其他問題，但它們包含了許多我認爲不需要的其他代碼。我的代碼

例子： test.json

"person": { 
    "name": John, 

    "lastname": Doe, 
    "interests": [ 
    "hiking", 
    "skiing" 
    ], 
    "age": 40 
}

test.js

import React, {Component} from 'react'; 

class Test extends Component { 
    render() { 
     return (

      ) 
     } 
}; 

export default Test;

我需要的代碼，讓我從進口JSON和代碼中顯示的所有字段組成。

來源

2017-07-10 ChloeH

您需要包含更多信息。你想從哪裏得到這個'json'？從本地文件？來自asynchro http請求？你想顯示鍵或值？或兩者？ –

我想從本地文件獲取json，並且我想要顯示鍵和值 – ChloeH

「從json導入」是否在編譯時有靜態文件可用？如果是，並且您使用的是webpack 2，則從'。/ path/to/file.json''導入json就足夠了。對於webpack 1，您需要爲'* .json'文件類型包含'json-loader'。 –

嗨，最好的解決方案是使用Axios。

https://github.com/mzabriskie/axios

嘗試看看其API的非常簡單。

是的，你可能需要一個map函數來循環解析的數據。

我在這裏有一個示例代碼，我使用了Axios。

import axios from 'axios'; 
const api_key = 'asda99'; 
const root_url = `http://api.jsonurl&appid=${api_key}`; 

export function fetchData(city) { //export default??? 
    const url = `${root_url}&q=${city},us`; 
    const request = axios.get(url); 
}

請求是您獲取解析數據的位置。來吧，與它使用ES5

componentDidMount: function() { 
    var self = this; 

    this.serverRequest = 
     axios 
     .get("http://localhost:8080/api/stocks") 
     .then(function(result) { 
      self.setState({ 
      stocks: result.data 
      }); 
     }) 

    },

通過使用第二一個玩

繼承人另一個例子。你在這裏儲存股票作爲一個狀態。將狀態解析爲數據片段。

來源

2017-07-10 18:44:40 Yuhao

是本地文件的axios嗎？或只是http請求？我正在使用本地文件 – ChloeH

是的，它可以是本地文件和遠程請求。在這裏，您可以切換 – Yuhao

從const root_url ='http：//api.jsonurl&appid=$ {api_key}'切換;到'./file.json' – Yuhao

使用JSON.parse（JSON）例子：

JSON.parse(`{"person": { 
    "name": "John", 

    "lastname": "Doe", 
    "interests": [ 
     "hiking", 
     "skiing" 
    ], 
    "age": 40 
}}`);

來源

2017-07-10 18:48:21 JakeBoggs

關心的第一個重要的問題是要如何得到這個JSON，如果我理解你的問題非常好是本地JSON文件。所以你需要在你的應用程序中運行一個本地服務器來獲取這些值。

我建議使用node.js.中的live-server。

後，您可以使用axios來獲取數據然後......

import React, {Component} from 'react'; 
import axios from 'axios'; 

constructor (props) { 
    this.state = { 
     items: [], 
    } 
    axios.get('http://localhost:8080/your/dir/test.json') 
    .then(res => { 
     this.setState({ items: res.data }); 
    }); 
} 
class Test extends Component { 
    console.log(this.state.items); 
    render() { 
     return (

      ) 
     } 
}; 

export default Test;

我已經把之前的console.log渲染，以顯示你的對象，之後，做你想做的！

來源

2017-07-10 18:57:21

如果你的json存儲在本地，你不必使用任何庫來獲取它。只需導入它。

import React, {Component} from 'react'; 
import test from 'test.json'; 

class Test extends Component { 
    render() { 
    const elem = test.person; 
    return (
    <ul> 
     {Object.keys(elem).map((v, i) => <li key={i}>{v} {test[v]}</li>)} 
    </ul> 
    ) 
    } 
}; 

export default Test;

來源

2017-07-10 19:09:12

React - 將json中的所有數據加載到組件

回答

相關問題