title: I create input fields based on my fetched data, but how can I only target the input fields with a value
body: <p>So, I have a JSON file with <code>syllables</code>, however I have 4 syllable inputs that all go to the JSON file like this:</p>
  
  <pre><code>{
      "main_object": {
          "id": "new",
          "getExerciseTitle": "TestWithNewCMS",
          "language": "nl_NL",
          "application": "lettergrepen",
          "main_object": {
              "title": "TestWithNewCMS",
              "language": "nl_NL",
              "exercises": [{
                      "word": "banaan",
                      "syllables": [
                          "ha",
                          "ha",
                          "",
                          ""
                      ]
                  },
                  {
                      "word": "Computervrienden",
                      "syllables": [
                          "oh",
                          "man",
                          "help",
                          ""
                      ]
                  }
              ]
          },
          "dataType": "json"
      }
  }
  </code></pre>
  
  <p>I have in my front-end a loop that creates input fields based on the syllables (but it DOES NOT fetch the <code>syllables</code> itself. it only creates input fields based on the syllables). What I want to do however is: It should ONLY create the amount of inputs based on <code>syllables</code> that have a value.</p>
  
  <p>going by the JSON file above it would be:</p>
  
  <p>2 input fields for the first one and 3 for the second one, because as you can see I have empty slots aswell. right now it displays 4 input fields, so it creates for the empty slots one aswell. but I only want input fields to be created on the amount of syllables given a value to. (I hope this made sense, tried explaining as good as I could)</p>
  
  <p>this is my code that loops through everything:</p>
  
  <pre><code>function createExercise(json) {
      const exercises = json.main_object.main_object.exercises;
  
      var exerciseArea = $('&lt;div/&gt;', {
          id: 'exerciseField',
          'class': 'col-md-12'
      });
  
      $.map(exercises, function (exercise, i) {
  
          var exer = $('&lt;div/&gt;', {
              'class': 'row form-group'
          })
  
          var colLeft = $('&lt;div/&gt;', {
              'class': 'col-md-3'
          });
  
          var row = $('&lt;div/&gt;', {
              'class': 'row'
          });
  
          var audCol = $('&lt;div&gt;', {
              class: 'col-md-3 audioButton'
          }).append(getAudioForWords());
  
          var wordCol = $('&lt;div&gt;', {
              class: 'col-md-9 ExerciseWordFontSize exerciseWord',
              'id': 'wordInput[' + ID123 + ']',
              text: exercise.word
          });
          row.append(audCol, wordCol);
          colLeft.append(row);
  
          var sylCol = $('&lt;div&gt;', {
              class: 'col-md-9'
          });
  
          var sylRow = $('&lt;div/&gt;', {
              class: 'row'
          });
  
          $.map(exercise.syllables, function (syllable, j) {
              var innerSylCol = $('&lt;div/&gt;', {
                  class: 'col-md-3 inputSyllables'
              });
  
              var sylInput = $('&lt;input/&gt;', {
                  'type': 'text',
                  'class': 'form-control syl-input',
                  'name': 'testid'
              });
  
              innerSylCol.append(sylInput);
              sylRow.append(innerSylCol);
          });
  
          sylCol.append(sylRow);
  
          exer.append(colLeft, sylCol);
  
          exerciseArea.append(exer);
      });
      return exerciseArea;
  }
  </code></pre>