I need to dynamically create (based on json ) slider components (stored in li ).
Here is the code to be inserted into ul:

 <li class="slider__li"> <div class="slider__block"> <div class="slider__sale slider__sale-pos">-30%</div> <div class="slider__img"><img src="/images/b1.png" alt=""></div> </div> </li>

Here is the jquery code that works with json:

 $.getJSON('js/sliders.json', function (data) { for (var i = 0; i < data.slider1.length; i++) { var k = "Вот сюда нужно вставить HTML"; $('.slider__ul').append(k); }; });

But when I insert the html code into a variable, there is a conflict with the "quotes", and the result is not a string, but what the hell, and it’s impossible to insert elements from json .
How to solve this problem?

  • And what prevents to enclose the html string not in double quotes but in single quotes, that is, var k = 'HTML'; ? - Alexey Shimansky
  • @ Alexey Shimansky is the same. The fact is that going to the next line also causes a problem, I mean, there may be a radically different way. - Alexander Alekseev
  • Right. transition to another line must be concocted ... - Alexey Shimansky
  • @ Alexey Shimansky and if I have 200 lines, it’s good to be at least 5. - Alexander Alekseev
  • one
    Well, normal IDEs automatically concatenate themselves when writing on a new line in js ........ And if you are doing this, then template engines ..... Or you can write a template in which the line will be written, and then the replace function will replace everything that is needed in one line with what is written in the template ......... - Alexey Shimansky

4 answers 4

Use jQuery Templates or a similar plugin.

Wrap your HTML with <script> element, add id .

 <script id="template" type="text/jquery-tmpl"> <li class="slider__li"> <div class="slider__block"> <div class="slider__sale slider__sale-pos">-30%</div> <div class="slider__img"><img src="/images/b1.png" alt=""></div> </div> </li> </script>

In the handler, add a call to the template engine.

 $.getJSON('js/sliders.json', function (data) { for (var i = 0; i < data.slider1.length; i++) { var k = $('#template').tmpl(data.slider1[i]); $('.slider__ul').append(k); }; });
  • Excellent solution, several problems covered at once, thanks! - Alexander Alekseev

You can use the standard ES-2015. It is necessary at the beginning of the code to add 'use strict'; and replace "" with ``. The option is good because it does not require any additional libraries.

 let multiline = `Это многострочный текст`;

In your case like this:

 'use strict'; // Обязательно в начале документа $.getJSON('js/sliders.json', function (data) { for (var i = 0; i < data.slider1.length; i++) { var k = ` <li class="slider__li"> <div class="slider__block"> <div class="slider__sale slider__sale-pos">-30%</div> <div class="slider__img"><img src="/images/b1.png" alt=""></div> </div> </li>`; $('.slider__ul').append(k); }; });

More details ( Lines in ES-2015 )

  • Thanks for the advice, but unfortunately I did not work this option. - Alexander Alekseev
  • Which browser are you using? - Brik Vadim

In fact, in any editor it is necessary to insert ' at the beginning of html lines, and ' + at the end:

 $.getJSON('js/sliders.json', function (data) { for (var i = 0; i < data.slider1.length; i++) { var k = ( ' <p> ' + ' <span>...</span> ' + ' </p> ' ); $('.slider__ul').append(k); }; });

    Try this solution with multiline code in JS https://github.com/sindresorhus/multiline

     Usage Everything after the first newline and before the last will be returned as seen below: const str = multiline(function(){/* <!doctype html> <html> <body> <h1>❤ unicorns</h1> </body> </html> */});
    • Something I did not understand with him, did everything as in the instructions. What js file do I need to connect? there are 5-6 of them there and everyone is named unequivocally. - Alexander Alekseev
    • <script src='browser.js'></script><script src='index.js'></script> - Maxim Tronenko
    • aha, 2 files, thanks! - Alexander Alekseev