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中的所有数据加载到组件

回答

相关问题