时间戳

首页 > 解决方案 > 通过 JavaScript 正确解释 JSON 数组

javascript - 通过 JavaScript 正确解释 JSON 数组

问题描述

目前能够过滤“团队”并说出它是否与 x 匹配，然后显示与之相关的所有内容。问题是通过硬编码搜索团队类别名称的方法，但需要它能够以编程方式代替每个独特的团队类型进行排序。

正如您在下面看到的，我的解决方案需要三个语句，而它可以只包含在一个面向对象的方法中。

$('#jobs-container .jobs-list').append(
  '<div id="teamtop"><span>Legal</span></div>');

for (i = 0; i < _data.length; i++) {
  for (j = 0; j < _data[i].postings.length; j++) {
    var posting = _data[i].postings[j]
    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 = nullCheck(posting.categories.location);
    var locationCleanString = cleanString(location);
    var commitment = nullCheck(posting.categories.commitment);
    var commitmentCleanString = cleanString(commitment);
    var team = nullCheck(posting.categories.team);
    var teamCleanString = cleanString(team);
    var link = posting.hostedUrl + leverParameter;

    if (team == "Legal") {
      $('#jobs-container .jobs-list').append(
        '<div class="job ' + teamCleanString + ' ' + locationCleanString + ' ' + commitmentCleanString + '">' +
        '<a class="job-title" href="' + link + '"">' + title + '</a>' +
        '</div>'
      );
    }
  }
}

$('#jobs-container .jobs-list').append(
  '<div id="teamtop"><span>Engineering</span></div>');

for (i = 0; i < _data.length; i++) {
  for (j = 0; j < _data[i].postings.length; j++) {
    var posting = _data[i].postings[j]
    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 = nullCheck(posting.categories.location);
    var locationCleanString = cleanString(location);
    var commitment = nullCheck(posting.categories.commitment);
    var commitmentCleanString = cleanString(commitment);
    var team = nullCheck(posting.categories.team);
    var teamCleanString = cleanString(team);
    var link = posting.hostedUrl + leverParameter;

    if (team == "Engineering") {
      $('#jobs-container .jobs-list').append(
        '<div class="job ' + teamCleanString + ' ' + locationCleanString + ' ' + commitmentCleanString + '">' +
        '<a class="job-title" href="' + link + '"">' + title + '</a>' +
        '</div>'
      );
    }
  }
}

$('#jobs-container .jobs-list').append(
  '<div id="teamtop"><span>Operations</span></div>');

for (i = 0; i < _data.length; i++) {
  for (j = 0; j < _data[i].postings.length; j++) {
    var posting = _data[i].postings[j]
    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 = nullCheck(posting.categories.location);
    var locationCleanString = cleanString(location);
    var commitment = nullCheck(posting.categories.commitment);
    var commitmentCleanString = cleanString(commitment);
    var team = nullCheck(posting.categories.team);
    var teamCleanString = cleanString(team);
    var link = posting.hostedUrl + leverParameter;

    if (team == "Operations") {
      $('#jobs-container .jobs-list').append(
        '<div class="job ' + teamCleanString + ' ' + locationCleanString + ' ' + commitmentCleanString + '">' +
        '<a class="job-title" href="' + link + '"">' + title + '</a>' +
        '</div>'
      );
    }
  }
}

我试图为团队中的每个人做一个，但我很难正确输出：

for(i = 0; i < team.length; i++) {
  alert ("output only teams once"+team);
}

尽管现在不需要 CSS 样式，但我或多或少地附上了试图实现的视觉概念，更侧重于按团队对标题进行分组。

按团队排序

所以我们得到了正确的输出，例如 

Legal
Corporate Associate
Corporate Paralegal
Junior Corporate Associate, Blockchain
Junior Corporate Associate, Emerging Growth
Legal Document Specialist
Regulatory & Compliance Counsel

但是我们是手动匹配到合法的，只是想过滤每个团队并查看。

Vngeener 回答每次重复组队，只需要打印一次组队即可。

标签： javascriptarraysjson

解决方案

  • 您实际上并不需要手动创建“Teamtop”div。
  • 您创建的 for 循环应该可以处理这个问题。
  • 而且您不需要每个团队标题的重复 for 循环代码。
  • 并且在循环中不需要“团队”条件。

编写代码的方式，没有正确利用 for 循环功能。

尝试用下面给出的代码替换您的代码（仅一次，不要在多个条件下重复此代码）：

var teamAdded = [];
for(i = 0; i < _data.length; i++) {
    for (j = 0; j < _data[i].postings.length; j ++) {
        var posting = _data[i].postings[j] 
        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 = nullCheck(posting.categories.location);
        var locationCleanString = cleanString(location);
        var commitment = nullCheck(posting.categories.commitment);
        var commitmentCleanString = cleanString(commitment);
        var team = nullCheck(posting.categories.team);
        var teamCleanString = cleanString(team);
        var link = posting.hostedUrl+leverParameter;

        //Add Team top heading dynamically
        if (!teamAdded[team]){
            $('#jobs-container .jobs-list').append(
            '<div id="teamtop"><span>'+ team +'</span></div><div id="team-children"  data-team="'+ team +'"></div>');
            teamAdded[team] = true;
        }
        // team condition was not required here
        // if(team=="Legal"){

        $('[data-team="'+ team +'"]').append(
        '<div class="job '+teamCleanString+' '+locationCleanString+' '+commitmentCleanString+'">' +
        '<a class="job-title" href="'+link+'"">'+title+'</a>' +        
        '</div>'      
        );
    }
}

推荐阅读