Как заполнить HTML данными из jquery (несколько вложенных div)

Как заполнить HTML данными из jquery (несколько вложенных div)

24.12.2019 06:37:27 Просмотров 26 Источник

Я хочу заполнить элементы внутри класса info-wrapper с помощью JQuery. Данные, которые необходимо заполнить, находятся внутри переменной data в JQuery. Я не могу использовать $('#id').append ("div") нравится этот синтаксис, потому что я хочу вложить несколько div друг в друга и поплюровать .карта-оболочка и ее дочерние элементы для каждого элемента данных.

В jQuery


    $.ajax({
        method: 'GET',
        url: 'getUser/admin',
        dataType: 'json',
        success: function (data) {
            console.log(typeof(data));
            data = Object.entries(data);
            for(var i = 0;i<data.length;i++)
            {

            }
        },
        error: function () {

        }
    })

Шаблон Лезвия

@extends('layouts.app')

@section('admin-content')
<div class="container">
                    <div class="row" id="inject">
                        <div class="col-md-6  col-sm-12">
                            <div class="card-wrapper">
                                <div class="info-wrapper">
                                    <h2 id="name"></h2>
                                    <h6 id="email"></h6>
                                    <hr/>
                                    <h6 id="department"></h6>
                                    <h6 is="sem"></h6>
                                </div>
                                <div class="button-wrapper">
                                    <button class="btn btn-danger" type="submit">Delete Account</button>
                                    <button class="btn btn-secondary" type="submit">Block Account</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
@endsection
У вопроса есть решение - Посмотреть?

Ответы - Как заполнить HTML данными из jquery (несколько вложенных div) / How to Populate HTML with data from jquery (multiple nested div)

Является ответом!
Shaphan

24.12.2019 07:26:16

Поскольку info-wrapper - это всего лишь один элемент, вы можете вместо этого заполнить элементы внутри div с помощью inject id, вы можете внести изменения в свой js для динамического генерирования элементов, я надеюсь, что это поможет.

    $.ajax({
    method: 'GET',
    url: 'getUser/admin',
    dataType: 'json',
    success: function (data) {
        console.log(typeof(data));
        data = Object.entries(data);

        let html = '';
        for(var i = 0;i<data.length;i++)
        {
          html += `
            <div class="card-wrapper">
              <div class="info-wrapper">
                  <h2 id="name">${data[i].name}</h2>
                  <h6 id="email">${data[i].email}</h6>
                  <hr/>
                  <h6 id="department">${data[i].department}</h6>
                  <h6 is="sem"><${data[i].sem}/h6>
              </div>
              <div class="button-wrapper">
                  <button class="btn btn-danger" type="submit">Delete Account</button>
                  <button class="btn btn-secondary" type="submit">Block Account</button>
              </div>
          </div>
          `;
        }

        html = `<div class="col-md-6  col-sm-12">${html}</div>`

        $('#inject').html(html);
    },
    error: function () {

    }
})
Закрыть X