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" 
     }, 
    ]; 

をレンダリングするために知らない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); 

あなたは時代状況のステータスと数を持つオブジェクトの新しい配列を作成することができ

Answer 3

以下のような出力を取得する必要があります​​3210

でコンソールをチェックしてください。 元のオブジェクトをループし、ちょうどあなたがあなたのrenderメソッドでは、以下のような何かを行うことができます値

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

を更新ステータスがすでにpresent.If存在しているかどうかを確認するためにfindIndexを使用しています。

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 
}