文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将CSV数据转换为JSON格式以在表中使用

问如何将CSV数据转换为JSON格式以在表中使用
EN

Stack Overflow用户
提问于 2022-10-27 11:58:05
回答 2查看 105关注 0票数 0

我有CSV格式的响应数据，如果我单击该特定行数据的任何一行，我希望在表中使用该响应数据，并获取该行数据。

我尝试使用CSVtoHtml npm，但是单击行的功能在那里不起作用。

CSV:

代码语言：javascript
复制
 {**CSV here**}

我必须做符号，名称，扇区，作为标题和下面的数据。

我尝试将它们转换到这样一个对象中，但没有显示在表中，无法映射数据：

代码语言：javascript
复制
CSV after converting to Objects:
    {0:...},
    {1:...},
    {2:...},
    ...,

..

这不是桌子上的

守则：

代码语言：javascript
复制
function Stocks() {
    const { readString } = usePapaParse();
    const navigate = useNavigate();
    const [stocksData, setStocksData] = useState([]);
    useEffect(() => {
        axios.get(baseURL).then((response) => {
          console.log(response.data)
          readString(response.data, {
            worker: true,
            complete: (results) => {
              const obj = results.data.map((el) => {
                return { ...el };
              });
              console.log(obj, "obj");
              setStocksData(obj);
            },
          });
        });
    }, []);

  return (
    <div className="grid inline mx-8">
      <div className="w-full flex justify-end grid my-4">
        <input className="bg-white rounded w-48 outline-0" />
      </div>
      <div className="bg-white text-red">
        <THeader>
          <THCell>Symbol</THCell>
          <THCell>Name</THCell>
          <THCell>Category</THCell>
          <THCell>Time</THCell>
        </THeader>
        <TBody></TBody>
      </div>
    </div>
    );
    }
javascript
reactjs
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-10-27 13:25:34

下面是一个基于CSV的简单工作示例。

获取标头，然后获取行并使用split(',')来获取行内的数据。

​

代码语言：javascript
复制
function App() {
  let str = `Symbol,Name,Sector,Validtill
  TECHM,Tech Mahindra Ltd.,Information Technology,2022-10-27 14:04:20
  KAJARIACER,Kajaria Ceramics Ltd.,Construction,2022-10-27 14:04:20
  IDBI,IDBI Bank Ltd.,Financial Services,2022-10-27 14:04:20
  HAVELLS,Havells India Ltd.,Consumer Goods,2022-10-27 14:04:20
  SBIN,State Bank of India,Financial Services,2022-10-27 14:04:20
  IPCALAB,Ipca Laboratories Limited,,2022-10-27 14:04:20
  TORNTPOWER,Torrent Power Ltd.,Energy,2022-10-27 14:04:20
  LALPATHLAB,Dr. Lal Path Labs Ltd.,Healthcare Services,2022-10-27 14:04:20
  ENGINERSIN,Engineers India Ltd.,Construction,2022-10-27 14:04:20
  OFSS,Oracle Financial Services Software Ltd.,Information Technology,2022-10-27 14:04:20
  INFIBEAM,Infibeam Incorporation Ltd.,Information Technology,2022-10-27 14:04:20
  DIVISLAB,Divi's Laboratories Ltd.,Pharma,2022-10-27 14:04:20
  GRASIM,Grasim Industries Ltd.,Cement & Cement Products,2022-10-27 14:04:20
  ADANIPOWER,Adani Power Ltd.,Energy,2022-10-27 14:04:20
  INDIGO,InterGlobe Aviation Ltd.,Services,2022-10-27 14:04:20
  CENTURYTEX,Century Textile & Industries Ltd.,Cement & Cement Products,2022-10-27 14:04:20
  BIOCON,Biocon Ltd.,Pharma,2022-10-27 14:04:20
  AARTIIND,Aarti Industries Limited,Chemicals,2022-10-27 14:04:20
  INDUSTOWER,Indus Towers Limited ,Telecom,2022-10-27 14:04:20
  BHARATFIN,Bharat Financial Inclusion Ltd.,Financial Services,2022-10-27 14:04:20`

  const headers = str.slice(0, str.indexOf("\n")).split(',');
  const rows = str.slice(str.indexOf("\n") + 1).split("\n");

 return (
  <table className="table table-striped">
    <thead>
      <tr>
      {headers.map(hstr => <th key={hstr}>{hstr}</th>)}
      </tr>
    </thead>
    <tbody>
      {rows.map(row => {
        return (
          <tr key={row}>
            {row.split(',').map(splt => <td key={splt}>{splt}</td>)}
          </tr>
        )
      })}
    </tbody>
  </table>  
 )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
代码语言：javascript
复制
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
<html>
<div id="root"/>
</html>

​

票数 -1
EN

Stack Overflow用户

发布于 2022-10-27 13:27:55

无反应的：

首先，定义table、thead、tr和tbody元素。您将需要实用程序函数(在本例中为fromCSVToJSON )，以便将CSV数据转换为JSON数据。接下来，您需要迭代数据的所有头和所有内容，以便创建tr和td元素。

下面的代码执行您要查找的内容：

代码语言：javascript
复制
<table id="table">
  <thead><tr></tr></thead>
  <tbody></tbody>
</table>
代码语言：javascript
复制
function fromCSVToJSON(csv) {
  const lines = csv.split('\n')
  const result = [];
  const headers = lines[0].split(',')

  for (let i = 1; i < lines.length; i++) {
    const obj = {}
    const currentline = lines[i].split(',')

    for (let j = 0; j < headers.length; j++) {
      obj[headers[j]] = currentline[j]
    }

    result.push(obj)

  }

  return { headers: headers, contents: result }
}

const { headers, contents } = fromCSVToJSON(`Symbol,Name,Sector,Validtill
TECHM,Tech Mahindra Ltd.,Information Technology,2022-10-27 14:04:20
KAJARIACER,Kajaria Ceramics Ltd.,Construction,2022-10-27 14:04:20
IDBI,IDBI Bank Ltd.,Financial Services,2022-10-27 14:04:20
HAVELLS,Havells India Ltd.,Consumer Goods,2022-10-27 14:04:20
SBIN,State Bank of India,Financial Services,2022-10-27 14:04:20
IPCALAB,Ipca Laboratories Limited,,2022-10-27 14:04:20
TORNTPOWER,Torrent Power Ltd.,Energy,2022-10-27 14:04:20
LALPATHLAB,Dr. Lal Path Labs Ltd.,Healthcare Services,2022-10-27 14:04:20
ENGINERSIN,Engineers India Ltd.,Construction,2022-10-27 14:04:20
OFSS,Oracle Financial Services Software Ltd.,Information Technology,2022-10-27 14:04:20
INFIBEAM,Infibeam Incorporation Ltd.,Information Technology,2022-10-27 14:04:20
DIVISLAB,Divi's Laboratories Ltd.,Pharma,2022-10-27 14:04:20
GRASIM,Grasim Industries Ltd.,Cement & Cement Products,2022-10-27 14:04:20
ADANIPOWER,Adani Power Ltd.,Energy,2022-10-27 14:04:20
INDIGO,InterGlobe Aviation Ltd.,Services,2022-10-27 14:04:20
CENTURYTEX,Century Textile & Industries Ltd.,Cement & Cement Products,2022-10-27 14:04:20
BIOCON,Biocon Ltd.,Pharma,2022-10-27 14:04:20
AARTIIND,Aarti Industries Limited,Chemicals,2022-10-27 14:04:20
INDUSTOWER,Indus Towers Limited ,Telecom,2022-10-27 14:04:20
BHARATFIN,Bharat Financial Inclusion Ltd.,Financial Services,2022-10-27 14:04:20`)

const table = document.getElementById('table')
const headTR = table.querySelector('thead > tr')

for (const header of headers) {
  const headTD = document.createElement('td')
  headTD.textContent = header
  headTR.append(headTD)
}

for (const content of contents) {
  const bodyTR = document.createElement('tr')
  for (const header of headers) {
    const bodyTD = document.createElement('td')
    bodyTD.textContent = content[header]
    bodyTR.append(bodyTD)
  }
  document.body.append(bodyTR)
}
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/74221677

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档