如何在react js中将json数据插入到手风琴中
[英]how to json data to be inserted in accordion in react js
问题描述
{
"message": "",
"data": [{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 18,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Workshop Expenses",
"amount": 1086332.17,
"group": "Admin Expenses",
"subgroup_id": 2112
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 1,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Administrative Expenses",
"amount": 818896.55,
"group": "Admin Expenses",
"subgroup_id": 2113
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 3997,
"subgroup_seq": 2,
"group_seq": 4,
"rootgroup_id": 4,
"subgroup": "Employee Benifits",
"amount": 12535362.01,
"group": "Staff costs",
"subgroup_id": 2114
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 3,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Communication Expenses",
"amount": 178568.81,
"group": "Admin Expenses",
"subgroup_id": 2116
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 4,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Freight & Cartage",
"amount": 82206.01,
"group": "Admin Expenses",
"subgroup_id": 2117
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 3997,
"subgroup_seq": 6,
"group_seq": 4,
"rootgroup_id": 4,
"subgroup": "Staff Welfare",
"amount": 439714.02,
"group": "Staff costs",
"subgroup_id": 2118
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4065,
"subgroup_seq": 8,
"group_seq": 16,
"rootgroup_id": 4,
"subgroup": "Interest Paid",
"amount": 5019919.0,
"group": "Finance Cost",
"subgroup_id": 2120
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4067,
"subgroup_seq": 1,
"group_seq": 1,
"rootgroup_id": 4,
"subgroup": "Purchase of Cars",
"amount": 395535346.61,
"group": "PURCHASE ACCOUNTS",
"subgroup_id": 2121
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4067,
"subgroup_seq": 2,
"group_seq": 1,
"rootgroup_id": 4,
"subgroup": "Purchase of Spares",
"amount": 38558778.38,
"group": "PURCHASE ACCOUNTS",
"subgroup_id": 2122
},
{
"root": "Income",
"root_seq": 3,
"group_id": 4083,
"subgroup_seq": 2,
"group_seq": 2,
"rootgroup_id": 3,
"subgroup": "Insurance Commission",
"amount": -579371.89,
"group": "Sale of Services",
"subgroup_id": 2125
},
{
"root": "Income",
"root_seq": 3,
"group_id": 4070,
"subgroup_seq": 4,
"group_seq": 1,
"rootgroup_id": 3,
"subgroup": "Parts Sale",
"amount": -37622615.91,
"group": "Sales Accounts",
"subgroup_id": 2126
},
{
"root": "Income",
"root_seq": 3,
"group_id": 4083,
"subgroup_seq": 1,
"group_seq": 2,
"rootgroup_id": 3,
"subgroup": "Labour Sales",
"amount": -9740952.02,
"group": "Sale of Services",
"subgroup_id": 2127
},
{
"root": "Income",
"root_seq": 3,
"group_id": 2999,
"subgroup_seq": 2,
"group_seq": 4,
"rootgroup_id": 3,
"subgroup": "Misc Sales Accounts",
"amount": -2983666.52,
"group": "Other Income",
"subgroup_id": 2128
},
{
"root": "Income",
"root_seq": 3,
"group_id": 4070,
"subgroup_seq": 2,
"group_seq": 1,
"rootgroup_id": 3,
"subgroup": "New Vehicle Sales",
"amount": -439036264.75,
"group": "Sales Accounts",
"subgroup_id": 2129
},
{
"root": "Income",
"root_seq": 3,
"group_id": 4070,
"subgroup_seq": 7,
"group_seq": 1,
"rootgroup_id": 3,
"subgroup": "Parts & Accessories",
"amount": -1841715.3,
"group": "Sales Accounts",
"subgroup_id": 2156
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 5,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Travelling Expenses",
"amount": 840058.39,
"group": "Admin Expenses",
"subgroup_id": 2164
},
{
"root": "Income",
"root_seq": 3,
"group_id": 4083,
"subgroup_seq": 3,
"group_seq": 2,
"rootgroup_id": 3,
"subgroup": "Finance Commissions",
"amount": -2585756.65,
"group": "Sale of Services",
"subgroup_id": 2179
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 6,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Bank Chgs",
"amount": 84670.98,
"group": "Admin Expenses",
"subgroup_id": 2181
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 7,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Subscriptions",
"amount": 14875.0,
"group": "Admin Expenses",
"subgroup_id": 2183
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 10,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Repairs & Maintenance",
"amount": 19516.52,
"group": "Admin Expenses",
"subgroup_id": 2184
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 11,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Selling Expenses",
"amount": 1877129.65,
"group": "Admin Expenses",
"subgroup_id": 2185
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 3997,
"subgroup_seq": 7,
"group_seq": 4,
"rootgroup_id": 4,
"subgroup": "PF & ESI Contribution",
"amount": 479154.0,
"group": "Staff costs",
"subgroup_id": 2186
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 13,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Printing & Stationery",
"amount": 341302.0,
"group": "Admin Expenses",
"subgroup_id": 2188
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 14,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Professional & Consultancy",
"amount": 677796.0,
"group": "Admin Expenses",
"subgroup_id": 2189
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 15,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Taxes & Licenses",
"amount": 20000.0,
"group": "Admin Expenses",
"subgroup_id": 2190
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 16,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Electricity Expenses",
"amount": 662833.96,
"group": "Admin Expenses",
"subgroup_id": 2191
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 17,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Rents",
"amount": 5503688.0,
"group": "Admin Expenses",
"subgroup_id": 2192
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 8,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Repairs & Maintenance - Buildings",
"amount": 141850.0,
"group": "Admin Expenses",
"subgroup_id": 2193
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4000,
"subgroup_seq": 9,
"group_seq": 5,
"rootgroup_id": 4,
"subgroup": "Repairs & Maintenance - P&M",
"amount": 84813.23,
"group": "Admin Expenses",
"subgroup_id": 2194
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4065,
"subgroup_seq": 10,
"group_seq": 16,
"rootgroup_id": 4,
"subgroup": "Interest paid to Others",
"amount": 972877.66,
"group": "Finance Cost",
"subgroup_id": 2196
},
{
"root": "Expenditure",
"root_seq": 4,
"group_id": 4065,
"subgroup_seq": 11,
"group_seq": 16,
"rootgroup_id": 4,
"subgroup": "Other Borrowing Costs",
"amount": 327500.0,
"group": "Finance Cost",
"subgroup_id": 2197
}
]
}
Hi, I just want the above JSON to be react accordion, the structure would be root name under that group under group name to show subgroup this will be handled by group_id .
嗨，我只是想让上面的 JSON 成为反应手风琴，结构将是组名下该组下的根名称，以显示子组这将由group_id处理。 if anyone helps me it means a lot.如果有人帮助我，那意义重大。
I want the data to be shown as in the image我希望数据如图所示
1 个解决方案
解决方案1
0 2020-02-05 07:01:45
you can store this json in a separate file and you can import this file where you want to use it.您可以将这个 json 存储在一个单独的文件中，并且可以将这个文件导入到您想要使用的位置。
Suppose your file name is example.json, then you can just import that file like假设您的文件名是 example.json，那么您可以像这样导入该文件
import response from "./example.json";
and you can use this response object to build accordion or anything.你可以使用这个响应对象来构建手风琴或任何东西。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在React js中插入json数据？ - How to insert json data in React js?
如何在反应js中处理map JSON数据？ - How to map JSON data in react js?
如何在 React JS 中显示这个 JSON 数据？ - how Display this JSON Data in React JS?
如何使用Bluemix上的Node js应用程序获取插入Mongo db集合中的json数据的ID - How to get the id of the json data inserted in the Mongo db collection with node js app on Bluemix
如何将鼠标悬停在从 JSON 插入的数据上 - How to hover over data inserted from JSON
如何使用数据范围过滤 json 数据（React JS） - How to filter json data with data range (React JS)
JSON 数据未在 React JS 中显示 - JSON data not showing in React JS
React JS 解析 JSON 中的数据 - React JS parsing data in JSON
如何从React JS（axios）中的json中提取一些数据？ - How to extract some data from json in react JS (axios)?
如何在 react js 中显示本地 json 文件中的数据？ - How to display data from a local json file in react js.?
相关标签