按团队对此JSON职位列表进行分组

时间:2015-03-06 09:07:33

标签: javascript jquery json

我有这个JSON,我想按团队对列表进行分组,例如在this page上:

  • 团队名称
    • 职位名称
    • 职位名称
    • 职位名称
  • 团队名称
    • 职位名称
  • 团队名称
    • 职位名称

以下内容来自他们的文件:

HTML:

<head>
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
</head>  
<section>
  <div class="container" id="jobs-container">
    <h1>Open jobs</h1>
    <div class="jobs-list">
    </div>
  </div>
</section>  

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

使用Javascript:

// REPLACE "LEVERDEMO" WITH YOUR COMPANY NAME BELOW
url = 'https://api.lever.co/v0/postings/leverdemo?mode=json'


//Setting up the structure for each job posting
function createJobs(_data) {
  for(i = 0; i < _data.length; i++) {
    var posting = _data[i] 
    var title = posting.text
    var description = posting.description  
    //Making each job description shorter than 250 characters
    var shortDescription = $.trim(description).substring(0, 250)
    .replace('\n', ' ') + "...";
    var location = posting.categories.location
    var commitment = posting.categories.commitment
    var team = posting.categories.team
    var link = posting.hostedUrl

    $('#jobs-container .jobs-list').append(
      '<div class="job '+team+' '+location+' '+commitment+'">' +
        '<a class="job-title" href="'+link+'"">'+title+'</a>' +
        '<p class="tags"><span>'+team+'</span><span>'+location+'</span><span>'+commitment+'</span></p>' +
        '<p class="description">'+shortDescription+'</p>' +
        '<a class="btn" href="'+link+'">Learn more</a>' +
      '</div>'  

    );
  }
}

//Fetching job postings from Lever's postings API
$.ajax({
  dataType: "json",
  url: url,
  success: function(data){
    createJobs(data);}
});

感谢任何帮助。链接到Codepen here

1 个答案:

答案 0 :(得分:0)

昨天我遇到了同样的问题。 这是我的决议:

 www.example.com/home/contents (anyone)
 www.example.com/home/about (anyone)
 www.example.com/user/order/list (page for logged in user)
 www.example.com/user/help/contact (page for logged in user)
 www.example.com/user/buy-now (custom url for route order/buy action)

希望这会对你有所帮助。