Hide undefined/empty variables in virtual list

Questions
1

I have a large JSON list, but some entries are intentionally empty.

When I parse this JSON list in a virtual list, I get “undefined” for the empty entries.

Is there any way to filter this and just filter the empty entries and not show them?

The JSON file deliberately contains gaps and customization is not an option.

JSON:

{
  
      "location": "London",
      "state": "xxx",
      "location1": "qqq",
      "company1": "aaaa",
      "location2": "",
      "company2": "",
      "location3": "xxxx",
      "company3": "",
      "location3": "",
      "company4": "aaaaa",
      "location5": "xxxx",
      "company5": "",
      "location6": "",
      "company6": ""
    },
    {
      "location": "New York",
      "state": "xxx",
      "location1": "aaaaa",
      "company1": "qqqq",
      "location2": "",
      "company2": "",
      "location3": "",
      "company3": "",
      "location3": "",
      "company4": "ffff",
      "location5": "dddd",
      "company5": "",
      "location6": "",
      "company6": ""
    },
    {
      "location": "Moscow",
      "state": "xxx",
      "location1": "",
      "company1": "qqqq",
      "location2": "",
      "company2": "",
      "location3": "eeeee",
      "company3": "",
      "location3": "wwwww",
      "company4": "",
      "location5": "gggggg",
      "company5": "",
      "location6": "",
      "company6": ""
    },
    {
      "location": "Tokio",
      "state": "xxxx",
      "location1": "vvvvvv",
      "company1": "ttttttt",
      "location2": "",
      "company2": "",
      "location3": "",
      "company3": "",
      "location3": "",
      "company4": "",
      "location5": "",
      "company5": "ggggg",
      "location6": "",
      "company6": ""
    }

JS-Code:

 app.request.json('data.json', function(data) {

        var content = data;

        app.virtualList.create({
          el: '.virtual-list',
          //height: 100,
          cache: false,
          createUl: true,
          items: content,

         
          renderItem(item) {
            return `
      <li class="accordion-item"><a class="item-content item-link" href="#">
        <div class="item-inner">
          <div class="item-title">${item.location}</div>
        </div>
      </a>
      <div class="accordion-item-content">
        <div class="block">
        <p>${item.state}</p>

          <p>>

          <p>
    ${item.location1}
    <br>
    ${item.company1}
          </p>

          <p>
    ${item.location2}
    <br>
    ${item.company2}
          </p>

          <p>
    ${item.location3}
    <br>
    ${item.company3}
          </p>

          <p>
    ${item.location4}
    <br>
    ${item.company4}
          </p>

        </div>
      </div>
    </li>
    `;
          },
          height: app.theme === 'ios' ? 65 : (app.theme === 'md' ? 73 : 46),

        });
      })
2

Didn’t get, what should be hidden?

3

For example, if in the JSON list the value for company4 is empty/not set, the list will show only “undefined” for ${item.company4}. But if the value is empty/not set, the template should simply output nothing at the corresponding position.

4

Then just do it ${item.company4 || ''}

1 Like