鍍金池/ 問答/HTML/ 請教下數(shù)組遍歷問題 js

請教下數(shù)組遍歷問題 js

我想遍歷的結果是一個table列表，現(xiàn)在的問題是全部數(shù)據(jù)只遍歷出一行出來了，我想要遍歷多行，每行遍歷出4條數(shù)據(jù)展示,該怎么弄呢

render() {
    const data = [{'名稱':'a1','編碼':'0026'},{'名稱':'a2','編碼':'0026'},{'名稱':'a3','編碼':'0026'},{'名稱':'a4','編碼':'0026'},{'名稱':'a5','編碼':'0026'},{'名稱':'a6','編碼':'0026'},{'名稱':'a7','編碼':'0026'},{'名稱':'a8','編碼':'0026'},{'名稱':'a9','編碼':'0026'},...];
    return (
      <div className="result">
        <div>
            {
              data.map((item,index) =>
                <div>
                  <p>{item['名稱']}</p>
                  <p>{item['編碼']}</p>
                </div>
              )
            }
         </div>
      </div>
    );
  }

圖片描述

回答
編輯回答
玄鳥

css控制一下，一行能裝下4個單元，float自動往下排

2017年4月21日 08:02
編輯回答
孤星

那你的數(shù)據(jù)結構要先變成[[{},{},{},{}],[{},{},{},{}]]這樣吧，然后2層循環(huán)，不知道我理解對沒

2017年9月17日 08:30
編輯回答
好難瘦

那就要把數(shù)據(jù)解構改改了，要是很多的話讓后端改。不多的話前端自己來處理。

ps: 后端返回字段的key最好不要使用中文。

[
    // 第一行
    [{
      '名稱':'a1','編碼':'0026'
    },{
      '名稱':'a1','編碼':'0026'
    },
      '名稱':'a1','編碼':'0026'
    },{
      '名稱':'a1','編碼':'0026'
    }],
    // 第二行
    [],
    ...
]
2018年2月17日 13:14
編輯回答
柒槿年
render() {
    const data = [{'名稱':'a1','編碼':'0026'},{'名稱':'a2','編碼':'0026'},{'名稱':'a3','編碼':'0026'},{'名稱':'a4','編碼':'0026'},{'名稱':'a5','編碼':'0026'},{'名稱':'a6','編碼':'0026'},{'名稱':'a7','編碼':'0026'},{'名稱':'a8','編碼':'0026'},{'名稱':'a9','編碼':'0026'},...];
    return (
      <div className="result">
        <div>
            {
               Array.from({length: Math.ceil(data.length / 4)}, (v, i) => i).map(() => {
                  return data.splice(0, 4).map((item, index) => {
                      <div key={index}>
                          <p>{item['名稱']}</p>
                          <p>{item['編碼']}</p>
                      </div>
                  })
                })
            }
         </div>
      </div>
    );
  }
2018年5月8日 14:36