react循环JSON对象显示JSX

文章参考

问题描述

今天想做一个通讯录,按照字母排序,需要根据转换后的数据格式转为JSX,之前只知道数组通过map()函数来循环遍历,但是不知道JSON如何处理,因此写一个笔记供自己学习

案例一:使用JSX对象

const groupDataJson = {"C":[{"firstName":"Cecilia","lastName":"Ekström","numbers":["543 980 0123"]}],"D":[{"firstName":"David","lastName":"Wikström","numbers":["909 991 0133"]}],"J":[{"firstName":"Jyrki","lastName":"Rautio","numbers":["333 725 900"]},{"firstName":"Janne","lastName":"Holma","numbers":["913 920 8123","899 010 0044"]}],"L":[{"firstName":"Laura","lastName":"Pyykkö","numbers":["555 788 3123"]},{"firstName":"Leena","lastName":"Lahti","numbers":["454 550 7493","499 110 4403"]}],"M":[{"firstName":"Matti","lastName":"Meikäläinen","numbers":["388 992 0121"]},{"firstName":"Mari","lastName":"Suntio","numbers":["551 899 4443"]},{"firstName":"Mikko","lastName":"Autio","numbers":["654 780 0055"]}],"N":[{"firstName":"Niilo","lastName":"Leskinen","numbers":["141 455 3645"]}],"P":[{"firstName":"Pekka","lastName":"Peltomäki","numbers":["333 990 0123"]},{"firstName":"Pasi","lastName":"Nuuksio","numbers":["125 090 0103","877 050 4502"]}],"R":[{"firstName":"Reino","lastName":"Tossavainen","numbers":["198 345 8886"]}],"S":[{"firstName":"Sami","lastName":"Erkkilä","numbers":["123 890 4555"]}],"T":[{"firstName":"Timo","lastName":"Ylistaro","numbers":["788 290 1423"]}],"V":[{"firstName":"Valtteri","lastName":"Heinämäki","numbers":["111 790 0453"]},{"firstName":"Ville","lastName":"Äänikoski","numbers":["333 990 0123"]}]};


// 根据排序后的数据,将数据以JSX方式显示出来
getHtmlByGroupData (groupData) {
  console.log(JSON.stringify(groupData));
  // 定义一个空数组,来存放jsx
  var res = [];
  const that = this;
  Object.keys(groupData).forEach(key => {
    var tempArr = groupData[key];
    res.push(<li key={key} id={'location_'+key}>{key}</li>)
    for(var i = 0; i < tempArr.length; i++){
      var tempObj = tempArr[i];
      // 添加的变量需要用 `{}`包裹
      res.push(<li key={tempObj['firstName']+tempObj['lastName']} onClick={that.selectItem.bind(that, tempObj)}>
        {tempObj['firstName']}----{tempObj['lastName']}
        </li>)
    }
  });
  return res;
}

案例二:拼装HTML代码

getHtmlByGroupData (groupData) {
  var resultHtml = '<ul>';
  Object.keys(groupData).forEach(key => {
    console.log(key, groupData[key]);
    var tempArr = groupData[key];
    resultHtml = resultHtml + '<li>'+key+'</li>';
    for(var i = 0; i < tempArr.length; i++){
      var tempObj = tempArr[i];
      resultHtml =resultHtml +  '<li>'+tempObj['firstName']+'----'+tempObj['lastName']+'</li>';
    }
  });
  resultHtml = resultHtml + '</ul>';
  return resultHtml;
}

render () {
  var { isFirstnameOrder, visible, modalType, formItemLayout, selectedContact } = this.state;
  const that = this;
  var groupData;
  // 判断是根据姓排序,还是根据名排序
  if (isFirstnameOrder) {
    groupData = this.getGroupByFirstname();
  } else {
    groupData = this.getGroupByLastname();
  }
  var htmlByGroupData = this.getHtmlByGroupData(groupData);
  // 获取已知的排序key,作为关键字的索引
  var indexArray = Object.keys(groupData);

  return (
    <div>
      <div dangerouslySetInnerHTML={{__html: htmlByGroupData}}></div>
    </div>
  );
}

<div dangerouslySetInnerHTML={{__html: htmlByGroupData}}></div>以HTML的格式显示

没有更多推荐了,返回首页