Home » Jquery » javascript – Append Elements to DOM According to Values From JS Array-Exceptionshub

javascript – Append Elements to DOM According to Values From JS Array-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

So the question’s kind of weird but here’s what I’m trying to accomplish:

I need a function that builds specific URLs, depending on an array inside a data attribute passed to the function, using a switch statement or whatever works best. This is my current syntax, which is probably wrong

const selectUrls = (args) => {
  const element = $("#element");

  for (let arg in args) {
    switch (arg) {
      case "facebook":
        element.append('<a href="https://facebook.com">Facebook</a>');
        break;
      case "twitter":
        element.append('<a href="https://twitter.com">Twitter</a>');
        break;
      default:
        console.log("error");
        break;
    }
  }
}
$(document).ready(function() {
  var services = $("#element").data("services");
  selectUrls(...[services]);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="element" data-services="['facebook','twitter']"></section>

End-result should be:

index.html

<section id="element" data-services="['facebook','twitter']">
    <a href="https://facebook.com">Facebook</a>
    <a href="https://twitter.com">Twitter</a>
</section>

...

Obviously, if there’s a better way to accomplish this, I’d be very open to trying it out.

Thanks!

How to&Answer:

You need to parse services after replacing the single quote with double quotes

var parsed = JSON.parse(services.replace(/'/g, '"'));

and use for of instead of for in :

$(document).ready(function() {
  var services = $("#element").data("services");
  // replace the single quote with double quotes and parse it
  var parsed = JSON.parse(services.replace(/'/g, '"'));
  selectGeoUrls(parsed);
})

const selectGeoUrls = (args) => {
  const element = $("#element");
  
  // for of instead of for in to get the element instead of the index
  for (let arg of args) {  
    switch (arg) {
      case "facebook":
        element.append('<a href="https://facebook.com">Facebook</a>');
        break;
      case "twitter":
        element.append('<a href="https://twitter.com">Twitter</a>');
        break;
      default:
        console.log("error");
        break;
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="element" data-services="['facebook','twitter']"></section>

Answer:

I done this…

const service_elm = document.querySelector('#element') 


for (let service of service_elm.dataset.services.match(/\b(\w|')+\b/gim) )
  {
  let newA = document.createElement('a')
  newA.href = `https://${service}.com`
  newA.textContent = service.charAt(0).toUpperCase() + service.slice(1);
  service_elm.appendChild(newA)
  }
a { float:left; clear: both; margin:1em }
<section id="element" data-services="['facebook','twitter']"></section>