javascript - 在选项选择中拆分 json

Question

我希望在项目选择中使用独立且唯一的数字分隔的数据。

像这样 ：

"Cuisine européenne"
"Cuisine traditionnelle"
"Cuisine méditerranéenne"
"Pizzas"
"Poisson / fruits de mer"
"Glaces"
"Régionale française"
"Viandes"
"Cuisine bistronomique"

代替

"Cuisine européenne"
"Cuisine traditionnelle"
"Cuisine méditerranéenne # Cuisine traditionnelle # Pizzas"
"Cuisine traditionnelle # Poisson / fruits de mer"
"Cuisine traditionnelle # Glaces # Poisson / fruits de mer"
"Régionale française"
"Cuisine traditionnelle # Poisson / fruits de mer # Viandes"
"Cuisine traditionnelle # Poisson / fruits de mer # Régionale française"
"Cuisine bistronomique # Cuisine traditionnelle"
"Cuisine européenne # Cuisine traditionnelle # Régionale française"
"Cuisine européenne # Cuisine traditionnelle"

这是我的代码

String.prototype.sansAccent = function(){
    var accent = [
        /[\300-\306]/g, /[\340-\346]/g, // A, a
        /[\310-\313]/g, /[\350-\353]/g, // E, e
        /[\314-\317]/g, /[\354-\357]/g, // I, i
        /[\322-\330]/g, /[\362-\370]/g, // O, o
        /[\331-\334]/g, /[\371-\374]/g, // U, u
        /[\321]/g, /[\361]/g, // N, n
        /[\307]/g, /[\347]/g, // C, c
    ];
    var noaccent = ['A','a','E','e','I','i','O','o','U','u','N','n','C','c'];
     
    var str = this;
    for(var i = 0; i < accent.length; i++){
        str = str.replace(accent[i], noaccent[i]);
    }
     
    return str;
}



$.ajax({
 
  url:"https://cdt33.media.tourinsoft.eu/upload/SIRTAQUI-OD-liste-xml-restaurants-traditionnels-ou-gastronomiques.xml",
  dataType: "xml",
  success: function(response) {
    json = $.xml2json(response);
    
    let release = json["#document"].modeles.modele_3273c1e2_2f44_48d1_ad93_4606bf3772a9.offre

    
    var data_filter = release.filter( element => element.COMMUNE =="MIOS" || element.COMMUNE == "BIGANOS" || element.COMMUNE == "MARCHEPRIME" || element.COMMUNE == "AUDENGE" || element.COMMUNE == "LANTON");
    
   $('#FilterSelect').html(function() {
    var ret = '<option value="">All</option>',
        u   = data_filter.slice(),
        arr = [];
    (function get() {
        if (u.length) {
            var v = u.shift();
            if ( $.inArray(v.COMMUNE, arr) == -1 ) {
                arr.push(v.COMMUNE);
                ret += '<option value=".' + v.COMMUNE + '">' + v.COMMUNE + '</option>';
            }
            get();
        }
    }());
    return ret;
});
    
       
    
    
      $('#project').html(function() {
    var ret32 = '<option value="">All</option>',
        u32   = data_filter.slice(),
        arr32 = [];

    (function get32() {
        if (u32.length) {
            var v32 = u32.shift();
            if ( $.inArray(v32.SPECIALITES, arr32) == -1 ) {
                arr32.push(v32.SPECIALITES);
             
              
                ret32 += '<option value=".' + v32.SPECIALITES.sansAccent().toLowerCase().replace(/\s/g,"-") + '">' + v32.SPECIALITES + '</option>';
            }
            get32();
        }
    }());
    return ret32;
});
    
        
    
    
    
    
 

    var datatest = data_filter;

  
    
    
    
    
    
    
    
    
    var newsDiv = $('<div id="MixItUp-Content-Container" class="mixitup-content-container" >').appendTo($("body"));

    $(data_filter).each(function(index, test) {
 
      
      
      let output = '';
    if(this.PHOTOS) {
    let users=this.PHOTOS.split(' # ');
for (var i = 0; i < users.length; i++) {

output += '<img src=https://cdt33.media.tourinsoft.eu/upload/'+users[i]+'?width=150&height=150&crop=1>';
 
  }
}
        let specialites = '';
     if(this.SPECIALITES) {
    let specialite=this.SPECIALITES.sansAccent().toLowerCase().replace(/\s/g,"-").split('#');
for (var i = 0; i < specialite.length; i++) {

specialites += ' '+specialite[i]+' ';
  
  }
}
 
      
  
  let string = `
      <div class="mix ${test.COMMUNE} ${specialites}  style="display: block;">
        <h2>${test.NOM_OFFRE}</h2>
        <p>${test.COMMUNE}</p>
        <p>${test.DESCRIPTIF}</p>
        <a href="${test.SITE_WEB}" target="_blank">${test.SITE_WEB}</a>
       </br>${output}
      </div>
      `
       newsDiv.append(string);
    });

var dropdownFilter = {


  $filters: null,
  $reset: null,
  groups: [],
  outputArray: [],
  outputString: '',

  
  init: function() {
  
    var self = this;

    self.$filters = $('#Filters');
    self.$reset = $('#Reset');
    self.$container = $('#MixItUp-Content-Container');

    self.$filters.find('fieldset').each(function() {
      self.groups.push({
        $dropdown: $(this).find('select'),
        active: ''
      });
    });

    self.bindHandlers();
  },

 
  bindHandlers: function() {
    var self = this;

   
    self.$filters.on('change', 'select', function(e) {
      e.preventDefault();

      self.parseFilters();
    });

    // Handle reset click
    self.$reset.on('click', function(e) {
      e.preventDefault();
      clear_filters(); // Global function
      self.$filters.find('select').val('');
      self.parseFilters();
    });
  },


  parseFilters: function() {
    var self = this;


    for (var i = 0, group; group = self.groups[i]; i++) {
      group.active = group.$dropdown.val();
    }

    self.concatenate();
  },


  concatenate: function() {
    var self = this;

    self.outputString = ''; // Reset output string

    for (var i = 0, group; group = self.groups[i]; i++) {
      self.outputString += group.active;
    }

 
    !self.outputString.length && (self.outputString = 'all');


    if (self.$container.mixItUp('isLoaded')) {
      self.$container.mixItUp('filter', self.outputString);
    }
  }
};


$(function() {


  dropdownFilter.init();

  
  $('#MixItUp-Content-Container').mixItUp({
    controls: {
      enable: false 
    }
    
  });
});


selector_dataset = null;
selector_dataset_opts = null;
selector_visualization = null;
selector_visualization_opts = null;


$(document).ready(function() {
  selector_dataset = $("#dataset");
  selector_dataset_opts = selector_dataset.find('option');
  selector_visualization = $("#visualization");
  selector_visualization_opts = selector_visualization.find('option');
});


function filter_selector_values(selector_id, parent_values) {

  selector = null;
  selector_opts = null;

  switch (selector_id) {
    case "dataset":
      selector = selector_dataset;
      selector_opts = selector_dataset_opts;
      break;
    case "visualization":
      selector = selector_visualization;
      selector_opts = selector_visualization_opts;
      break;
    default:
      return;
  }

 
  option_all = selector_opts.filter("[parent-value='.']");
  selector.empty().append(option_all);

  
  filtered_options = new Array();
  for (var i = 0; i < parent_values.length; ++i) {
    parent_value = parent_values[i];
    filtered = selector_opts.filter("[parent-value='" + parent_value + "']");
    filtered_options.push(filtered);
  }
  selector.append(filtered_options);
};


function clear_filters() {
  selector_dataset.empty().append(selector_dataset_opts);
  selector_visualization.empty().append(selector_visualization_opts);
};

// Listen the event of user changing a project
$(document).on('change', '#project', function() {
  // Filter child datasets
  selected_project = $('option:selected', this).attr('value')
  dataset_parent_projects = new Array();
  if (selected_project == '') {
    // All was selected
    $("#project option").each(function() {
      dataset_parent_projects.push($(this).attr('value'));
    });
  } else {
    
    dataset_parent_projects.push(selected_project)
  }
  filter_selector_values("dataset", dataset_parent_projects);


  visualization_parent_datasets = new Array();
  $("#dataset option").each(function() {
    visualization_parent_datasets.push($(this).attr('value'));
  });
  filter_selector_values("visualization", visualization_parent_datasets);

 
  selector_dataset.get(0).selectedIndex = 0;
  selector_visualization.get(0).selectedIndex = 0;


  dropdownFilter.parseFilters();
});

$(document).on('change', '#dataset', function() {


  selected_dataset = $('option:selected', this).attr('value')
  visualization_parent_datasets = new Array();
  if (selected_dataset == '') {
    // All was selected
    $("#dataset option").each(function() {
      visualization_parent_datasets.push($(this).attr('value'));
    });
  } else {
   
    visualization_parent_datasets.push(selected_dataset)
  }
  filter_selector_values("visualization", visualization_parent_datasets);

 
  selector_visualization.get(0).selectedIndex = 0;


  dropdownFilter.parseFilters();
});
  } 
});

html,
body {
  padding: 10px;
  background: #ecf0f1;
  font-family: Helvetica, Arial, sans-serif;
}


/* MixItUp */


/**
 * Form & Button Styles
 */

h4 {
  color: #34495E;
  font-weight: 400;
  font-size: 16px;
  margin-top: 0;
  font-weight: bold;
}

label {
  font-weight: 300;
}

button {
  font-family: 'Open Sans', sans-serif;
  color: white;
  display: inline-block;
  padding: .3em .7em;
  background: #34495E;
  border: 0;
  border-radius: 4px;
  margin-top: 36px;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
}

button.active {
  background: #68b8c4;
}

button:focus {
  outline: 0 none;
}

button:first-of-type {
  margin-left: 0;
}

button:last-of-type {
  margin-right: 0;
}

button:focus {
  outline: 0 none;
}

.controls {
  padding-top: 0%;
  text-align: left;
}

fieldset {
  font-weight: 300;
  color: white;
  display: inline-block;
  vertical-align: top;
  margin: 0 1em 0 0;
  padding: 0;
  border: 0;
}


/* Dropdown */

select {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline style='fill:white;' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>");
  background-color: #34495E;
  background-repeat: no-repeat;
  background-position: right 10px top 10px;
  background-size: 12px 12px;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  font-size: 16px;
  border-radius: 4px;
  padding: 5px 35px 5px 5px;
  color: white;
}

select:focus,
select:active {
  border: 0;
  outline: 0;
}


/**
 * Container/Target Styles
 */

.mixitup-content-container {
  color: gray;
  padding: 2% 0 0;
  text-align: justify;
}

.mixitup-content-container:after {
  content: '';
  display: inline-block;
  width: 100%;
}

.mixitup-content-container .mix,
.mixitup-content-container .gap {
  display: inline-block;
  width: 49%;
}

.mixitup-content-container .mix {
  padding-bottom: 17%;
  padding-left: 0;
  text-align: left;
  background: #00C28A;
  color: white;
  border-radius: 4px;
  margin-bottom: 2%;
  vertical-align: top;
  display: none;
}

.mixitup-content-container .mix.project-1 {
  background: rgba(0, 194, 138, 0.9);
}

.mixitup-content-container .mix.project-2 {
  background: #FFBC67;
}

.mixitup-content-container .mix.dataset-b {
  background: #DA727E;
}

.mixitup-content-container .mix.visualization-III {
  background: #AC6C82;
}

.mixitup-content-container .mix.visualization-VI {
  background: #685C79;
}

.mixitup-content-container .mix.visualization-V {
  background: #455C7B;
}

@media all and (min-width: 420px) {
  .mixitup-content-container .mix,
  .mixitup-content-container .gap {
    width: 32%;
    padding-bottom: 17%;
  }
}

@media all and (min-width: 640px) {
  .mixitup-content-container .mix,
  .mixitup-content-container .gap {
    width: 23.5%;
  }
}


/**
 * Fail message styles
 */

.mixitup-content-container .fail-message {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 150ms;
  -moz-transition: 150ms;
  transition: 150ms;
}

.mixitup-content-container .fail-message:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.mixitup-content-container .fail-message span {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  font-weight: 700;
}

.mixitup-content-container .fail .fail-message {
  opacity: 1;
}

p {
  margin: 5px;
  font-size: 22px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/8689/xml2json.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<div class="hr25" id="hr25"></div>

<form class="controls" id="Filters">
<fieldset>
    <h4>Project</h4>
    
  <select id="FilterSelect">
  </select>
  </fieldset>
  <fieldset>
    <h4>Project</h4>
    <select id="project">
      <option value="">All</option>
      <option value=".project-1">Project 1</option>
      <option value=".project-2">Project 2</option>
    </select>
  </fieldset>
  <fieldset>
    <h4>Project2</h4>
    <select id="project2">
      <option value="">All</option>
      <option value=".project-1">Project 1</option>
      <option value=".project-2">Project 2</option>
    </select>
  </fieldset>

  <fieldset>
    <h4>Dataset</h4>
    <select id="dataset">
      <option value="" parent-value=".">All</option>
      <option value=".dataset-a" parent-value=".project-1">Dataset a</option>
      <option value=".dataset-b" parent-value=".project-2">Dataset b</option>
      <option value=".dataset-c" parent-value=".project-2">Dataset c</option>
    </select>
  </fieldset>

  <fieldset>
    <h4>Visualization</h4>
    <select id="visualization">
      <option value="" parent-value=".">All</option>
      <option value=".visualization-I" parent-value=".dataset-a">Visualization I</option>
      <option value=".visualization-II" parent-value=".dataset-b">Visualization II</option>
      <option value=".visualization-III" parent-value=".dataset-b">Visualization III</option>
      <option value=".visualization-IV" parent-value=".dataset-c">Visualization IV</option>
      <option value=".visualization-V" parent-value=".dataset-c">Visualization V</option>
      <option value=".visualization-VI" parent-value=".dataset-c">Visualization VI</option>
    </select>
  </fieldset>

  <button id="Reset">Clear Filters</button>
</form>

标签： javascriptjsonsplitslice