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

Question

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

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

您必须按照所需方式处理数据。 我会做如下。 让我们假设data与您所讨论的数据相同。

let data = [{},...];

const res = {};

data.forEach((item) => {
  const key = item.status || ' ';
  res[key] = (res[key] || 0) + 1;
});

现在res将具有格式。

res = {opening: 1, closed: 3, ' ': 1};

然后，您可以从res获取keys并对其进行迭代以显示数据。 在下面，我们形成必需的文本。 您可以根据需要格式化它。

const finalResult = Object.keys(res).map((key) => {
 return `title: ${key}, times: ${res[key]}`;
}).join('\n');

console.log('Final result\n' + finalResult);

检查Codepen演示中的控制台

您应该获得类似于以下的输出

Answer 3

您可以使用状态和状态次数创建对象的新数组。 遍历原始对象并使用findIndex检查状态是否已经存在，如果存在则只需更新值

 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" }, ]; let dataObj = []; data.forEach(function(item) { let getIndex = dataObj.findIndex(function(item2, index) { return item2.title === item.status }) if (getIndex === -1) { let obj = {}; obj.title = item.status obj.times = 1; dataObj.push(obj) } else { dataObj[getIndex].times = dataObj[getIndex].times + 1; } }) console.log(dataObj) dataObj.forEach(function(item) { for (var keys in item) { document.write(keys + ':' + item[keys] + '</br>') } }) 

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中：

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
}