Question

如何格式化以下数据进行渲染？
我有一些来自apis的数据，但我不知道如何渲染它

let data = [
        {
            type: "Typical",
            tower: "T3",
            floor: "4",
            flat: "B",
            status: ""
        },
        {
            type: "Typical",
            tower: "T5",
            floor: "5",
            flat: "C",
            status: "closed"
        },
        {
            type: "Typical",
            tower: "T7",
            floor: "4",
            flat: "B",
            status: "closed"
        },
        {
            type: "Typical",
            tower: "T4",
            floor: "7",
            flat: "B",
            status: "closed"
        },
        {
            type: "Typical",
            tower: "T2",
            floor: "5",
            flat: "C",
            status: "opening"
        },
    ];

我想使用react js输出以下文本：

title: , times: 1
title: closed, times: 3
title: opening, times: 1

感谢。

Answer 1

只是遍历您的数据

var results = {};
for (var i = 0; i < data.length; i++) {
  if (results[data[i].status] != null) results[data[i].status]++;
  else results[data[i].status] = 1;
}

console.log(JSON.stringify(results));

Answer 2

您必须按照自己的方式处理数据。我会这样做。我们假设let data = [{},...]; const res = {}; data.forEach((item) => { const key = item.status || ' '; res[key] = (res[key] || 0) + 1; });与您所涉及的数据相同。

res

现在res = {opening: 1, closed: 3, ' ': 1};将是格式化的。

keys

然后，您可以从res获取const finalResult = Object.keys(res).map((key) => { return `title: ${key}, times: ${res[key]}`; }).join('\n'); console.log('Final result\n' + finalResult);并对其进行迭代以显示您的数据。下面，我们形成所需的文本。您可以根据需要对其进行格式化。

{{1}}

在Codepen demo

中查看控制台

你应该得到类似于下面的输出

Answer 3

您可以创建一个具有状态和状态次数的新对象数组。循环遍历原始对象并使用<?xml version="1.0" encoding="UTF-8"?><hierarchy rotation="0"><android.widget.FrameLayout index="0" text="" class="android.widget.FrameLayout" package="com.test.program" content-desc="" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,0][768,1184]" resource-id="" instance="0"><android.widget.LinearLayout index="0" text="" class="android.widget.LinearLayout" package="com.test.program" content-desc="" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,0][768,1184]" resource-id="" instance="0"><android.widget.FrameLayout index="0" text="" class="android.widget.FrameLayout" .......... resource-id="android:id/navigationBarBackground" instance="201"/></android.widget.FrameLayout></hierarchy>检查状态是否已存在。如果存在则只更新值

＆＃13;

findIndex

＆＃13;

Answer 4

您可以在渲染方法中执行以下操作。

render() {
    let data = 'Your data here';
    let status = ['opening', 'closed', ''];
    return (
       <div>
           {status.map((sta, i) => {

              let count = 0; // Initial count for status

              data.map((st, j) => {
                   if(st.status == sta) {
                       ++count;
                   }
              })

              return (
                  <div key={i}>
                      <span>title: {sta}, times: {count}</span>
                  </div>
              )
           })}
        </div>    
    )
}

您可以在这里查看工作jsfiddle https://jsfiddle.net/3ps16j08/2/

Answer 5

为了提高效率，您可能希望将处理移到渲染之外。下面根据您的问题在渲染中显示：

render() {
    const processedData = data.reduce((result, next) => {
        const title = `${next.tower} ${next.floor} ${next.flat}`
        const status = next.status
        result[title] = result[title] || { title: title, counts: {} }
        result[title].counts[status] = result[title].counts[status] || 0
        result[title].counts[status]++
        return result
    }, {})

    const elemArray = Object.values(processedData).reduce((result, next) => {
        const counts = Object.entries(next.counts)
        const elems = counts.map(entry => (
            <h1>
                {datum.title}: {datum.counts[entry[0]]}, times: {datum.counts[entry[1]]}
            </h1>
        )
        return result.concat(elems)
    }, [])

   return elemArray
}

反应js：如何格式化以下数据进行渲染？

5 个答案: