Ajax doing a week. How to build HTML with jQuery That is, it is necessary that the script read JSON , see, for example, item JSON -a, collect HTML and insert data from JSON into the collected DOM elements that jquery collects when it sees JSON .

Below is JSON , which I did, and a little below is the HTML structure, which should turn out of it.

 { "works-item":{ "item":{ "title":"Limited <br>для VAZ", "image-data":"VAZ", } "item":{ "title":"Limited <br>в BAZ", "image-data":"BAZ", } } 
 <div id="cases" class="c-works"> <h2 class="work-header" style="display: none;"></h2> <div class="box_skvere"> <img data-url="worksVAZ" src="img/works/VAZ.jpg"> <h3>Limated <br>для VAZ</h3> </div> <div class="box_skvere"> <img data-url="worksBAZ" src="img/works/BAZ.jpg"> <h3>Limited <br>в BAZ</h3> </div> </div>

That is, roughly speaking, initially there is nothing in Html, everything is collected after reading and parsing json-a. And the number of collected house-elements must match the number of elements in json.

Help to understand, please, who knows.

  • What have you done to solve your problem? What faced? - korytoff

3 answers 3

So what exactly causes the difficulty? You have a json object whose structure is known in advance.

for example:

 var json = {item:{ type: "div", class:"main" id:"div_id", text: "контент" }}

Now you need to create HTML markup from this object. It is possible so:

 $( "<div/>", { class : json.item.class, id: json.item.id } ).appendTo( *куда этот элемент будет вставлен* );

Content if you need something to insert into the block:

  $( "<div/>", { class : json.item.class, id: json.item.id } ).html( json.item.text).appendTo( *куда этот элемент будет вставлен* );

As a result, you get this design:

 <div class="main" id="div_id">контент</div>

    Usually templates are used to simplify life in these cases. Of course, you can write everything with your own hands (html generation), but it will be very tiring, it will be buggy, and it will be harder to maintain.

    For example on handlebars.js (the full code for your example):

     var json = { "works-item": [{ "title": "Limited <br>для VAZ", "image-data": "VAZ", }, { "title": "Limited <br>в BAZ", "image-data": "BAZ", }] }; var source = $("#div-template").html(); var template = Handlebars.compile(source, { noEscape: true }); var html = template(json); $("#insert-pos").html(html); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="insert-pos"></div> <script id="div-template" type="text/x-handlebars-template"> <div id="cases" class="c-works"> <h2 class="work-header" style="display: none;"></h2> {{#each works-item}} <div class="box_skvere"> <img data-url="works{{image-data}}" src="img/works/{{image-data}}.jpg" /> <h3>{{title}}</h3> </div> {{/each}} </div> </script>

      First, make sure your Json is valid, for example, http://jsonformatter.curiconcept.com/

      When you make a Json object without error, you need to go through it and display the necessary properties or form an html block and then later bring it to the right place. example:

       itemsJson.forEach(function (item, i) { $("#resultDiv").val(item.title); //решетка это ИД дива для вывода //или так $("#resultDiv").html("<div class='div-center'><h4>" + item.title + "</h4><br><br><br>"); }
      • to sozh. not all of my code was added to the response, besides it was not highlighted ((Very uncomfortable here is the editor, compared to cyberformum for coolant ( - beatsspam
      • one
        select the code and press the { } button on the toolbar, of course, very inconvenient) - Nofate ♦
      • By the way, I also advise the author of the question to consider the possibility of using js templates, for example, embeddedjs.com is very good - beatsspam