Remove Remote Duplicate Value

[borhanuddin]

Hi, I use remote data from json file and was wondering if there is any way I can remove duplicate value?

[lekoala]

Using server response callback you can pretty much process it the way you want no?

[borhanuddin]

I think I have to elaborate more about my use case. I'm trying to create 1 state-city json file like below, so that I can use on both state and city input; and also can create data relationship between both 2 input field.

[
    { "state": "Texas", "city": "Houstan" },
    { "state": "Texas", "city": "San Antonio" },
    { "state": "California", "city": "Los Angeles" },
    { "state": "California", "city": "San Diego" }
]

When I set labelField: "city" I have no problem with it but it will create duplicate value if I set labelField: "state" which will create duplicate value.

Is there another proper method or can you show me example on using server response callback to remove duplicate value (I think this will impact performance).

[lekoala]

Hi there,

I've updated the demo with your use case (and made some things a bit easier in https://github.com/lekoala/bootstrap5-tags/releases/tag/1.5.21)

Filtering duplicate values should not be a big deal in terms of performance

  window['app'] = {
    cityResponse: (promise, inst) => {
      const data = [
          { "state": "Texas", "city": "Houstan" },
          { "state": "Texas", "city": "San Antonio" },
          { "state": "California", "city": "Los Angeles" },
          { "state": "California", "city": "San Diego" }
      ];

      if(inst.config('labelField') == "state") {
        const unique = [];
        return data.filter((el, idx) => {
          if(unique.indexOf(el.state) === -1) {
            unique.push(el.state);
            return true
          }
          return false;
        })
      }
      return data;
    }
  }

 <div class="row mb-3 g-3">
        <div class="col-md-4">
          <label for="tags_city" class="form-label">Tags (city)</label>
          <select class="form-select" id="tags_city" name="tags_city" data-allow-clear="1" data-suggestions-threshold="0" 
          data-label-field="city" data-value-field="city"
          data-server="demo.json" data-on-server-response="app.cityResponse">
            <option value="">Choose a tag...</option>
          </select>
        </div>
        <div class="col-md-4">
          <label for="tags_state" class="form-label">Tags (state)</label>
          <select class="form-select" id="tags_state" name="tags_state" data-allow-clear="1" data-suggestions-threshold="0" 
          data-label-field="state" data-value-field="state"
          data-server="demo.json" data-on-server-response="app.cityResponse">
            <option value="">Choose a tag...</option>
          </select>
        </div>
      </div>

[borhanuddin]

Thank you so much for your help. Will use this method in my project.

[lekoala]

@borhanuddin glad i could help, ,closing this ;)