<div class="date">20-12-2012</div> <div"> <div class="date">20-12-2012</div> <div"> <div class="date">20-12-2012</div> <div" />

Как заполнить список HTML в цикле

У меня есть список Html, я получаю данные в виде JSON-словаря из вызова REST, я перехожу и получаю их значения. Но я не мог найти, как сгенерировать Html ниже с элементами в цикле.

<div class="container">
  • <div class="date">20-12-2012</div> <div class="ammount">-€4,25</div>
  • <div class="place">data</div> <div class="category">data</div> <div class="description_title">data</div> <div class="description">data</div>
  • //repeat this for multi items received from REST

$.ajax
  ({

   success: function (data){                    
        var transactions=data['transactions'];      

        $.each( transactions, function( key, value ) {
             $.each( value, function( key, value) {

                //here how to set/create the appropriate div elements(like above) 
               //with the values I get here in a loop? 

             });                        
      }); 

EDIT some solutions below is fine, but I dont want all the values from my object array, how can I get only these items(date, amount, place..etc) to the html div and ignore other items in the dictionary

0
nl ja de
Просьба предоставить образец ответа JSON с сервера.
добавлено автор Cᴏʀʏ, источник

3 ответы

попробуйте это ... возьмите переменную, сообщите html ... итерацию через json array ... добавьте элементы в список ... и поместите весь html внутри div.

var html='
    '; $.ajax ({ success: function (data){ var transactions=data['transactions']; $.each( transactions, function( key, value ) { $.each( value, function( key, value) { html+='
  • '+value+'
  • '; }); }); } }); html+='
'; $('#idofdiv').html(html);
1
добавлено
tnx Я не знаю, сколько элементов я получу, как я могу изменить текущий html выше?
добавлено автор Spring, источник
да ... извините..и изменил код
добавлено автор Ankush Jain, источник
Это не будет работать должным образом. Вы добавите пустой список
до того, как будет достигнут обратный вызов.
добавлено автор Shmiddty, источник
У вас должен быть способ узнать, какой класс li должен отвечать вашему ответу, если у вас есть основная часть данных, поступающих в виде одного ответа.
добавлено автор cggaurav, источник

вы можете использовать..

     var data = "";

   $.each( transactions, function( key1, value1 ) {
         data +="
  • "; $.each( value1, function( key, value) { data +="<div class ='"+ key +"'>"+value+"</div>"; }); }); $("ul").html(data);//selecting ul element and then embedding html into it..
  • 1
    добавлено
    thx, моя проблема в том, что мне нужно, чтобы некоторые из значений из этого списка не переименовывались во все стороны, как я могу это сделать?
    добавлено автор Spring, источник
    $.each( value, function( key, value) {
    
                //here how to set/create the appropriate div elements(like above) 
               //with the values I get here in a loop? 
    
                $(".infoDetails").append("<div class='" + key + "'>" + value + "</div>");
             }); 
    
    1
    добавлено
    tnx Я не знаю, сколько элементов я получу, как я могу изменить текущий html выше?
    добавлено автор Spring, источник
    JavaScript Jobs — чат
    JavaScript Jobs — чат
    8 336 участник(ов)

    JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

    JavaScript.ru
    JavaScript.ru
    7 932 участник(ов)

    Сообщество сайта JavaScript.ru в Slack.

    pro.js
    pro.js
    4 675 участник(ов)

    Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

    Верстка сайтов HTML/CSS/JS/PHP
    Верстка сайтов HTML/CSS/JS/PHP
    3 439 участник(ов)

    Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

    JavaScript — русскоговорящее сообщество
    JavaScript — русскоговорящее сообщество
    3 269 участник(ов)

    Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

    JavaScript Noobs — сообщество новичков
    JavaScript Noobs — сообщество новичков
    2 484 участник(ов)

    Чат для новичков

    Чат — Типичный Верстальщик
    Чат — Типичный Верстальщик
    1 080 участник(ов)

    Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

    javascript_ru
    javascript_ru
    915 участник(ов)

    Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

    jsChat
    jsChat
    603 участник(ов)

    Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

    JavaScript for Zombies Chat
    JavaScript for Zombies Chat
    492 участник(ов)

    Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

    All That JS
    All That JS
    417 участник(ов)

    JS на русском

    Веб-Технологи: UI/UX, Вёрстка, Фронтенд
    Веб-Технологи: UI/UX, Вёрстка, Фронтенд
    167 участник(ов)

    Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

    DTP :: @DTPublish
    DTP :: @DTPublish
    147 участник(ов)

    Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing