0

Что-то я все попортила - хотела сделать так:

введите сюда описание изображения

А получилось так:

введите сюда описание изображения

Мне с сервера приходит JSON:

введите сюда описание изображения

А внести его на страницу я пытаюсь так:

function loadCatalog(){
        $.getJSON("/update", function (data) {
            console.log(data);

            for (let i = 0; i < data.categories.length; i++) {
                let div = $("<div></div>").addClass("alert alert-info text-center");
                div.append($("<h3></h3>").text(data.categories[i].title));

                div.append('<table class="table"><thead><tr>');
                div.append('<th scope="col">Id</th>');
                div.append('<th scope="col">Name</th>');
                div.append('<th scope="col">Price (in cents)</th>');
                div.append('<th scope="col">Rate</th>');
                div.append('</tr></thead><tbody>');

                for (let j = 0; j < data.categories[i].products.length; j++) {
                    div.append('<tr><th scope="row">' + data.categories[i].products[j].id + '</th>');
                    div.append('<td>' + data.categories[i].products[j].name + '</td>');
                    div.append('<td>' + data.categories[i].products[j].priceInCents + '</td>');
                    div.append('<td>' + data.categories[i].products[j].rate + '</td></tr>');
                }

                div.append('</tbody></table>');

                $("#catalog").append(div).append('<br>');
            }
        });
    }

что я делаю не так?( Я совсем зеленая в этом деле

JSON:

{
  "categories": [
    {
      "id": 1,
      "title": "Clothes category",
      "products": [
        {
          "id": 1,
          "name": "Sweater",
          "priceInCents": 65458,
          "rate": 45
        },
        {
          "id": 2,
          "name": "Jacket",
          "priceInCents": 11111,
          "rate": 89
        },
        {
          "id": 3,
          "name": "Coat",
          "priceInCents": 9999,
          "rate": 36
        },
        {
          "id": 4,
          "name": "Vest",
          "priceInCents": 1200,
          "rate": 68
        },
        {
          "id": 5,
          "name": "Shorts",
          "priceInCents": 45000,
          "rate": 90
        },
        {
          "id": 6,
          "name": "Casual dress",
          "priceInCents": 36500,
          "rate": 79
        }
      ]
    },
    {
      "id": 2,
      "title": "Food category",
      "products": [
        {
          "id": 7,
          "name": "Meet",
          "priceInCents": 2132,
          "rate": 100
        },
        {
          "id": 8,
          "name": "Cookies",
          "priceInCents": 1111,
          "rate": 90
        },
        {
          "id": 9,
          "name": "Bread",
          "priceInCents": 777,
          "rate": 85
        },
        {
          "id": 10,
          "name": "Apples",
          "priceInCents": 454,
          "rate": 32
        },
        {
          "id": 11,
          "name": "Ice cream",
          "priceInCents": 873,
          "rate": 79
        }
      ]
    },
    {
      "id": 3,
      "title": "Toys category",
      "products": [
        {
          "id": 13,
          "name": "Barbie",
          "priceInCents": 12345,
          "rate": 80
        },
        {
          "id": 14,
          "name": "Cycle",
          "priceInCents": 65432,
          "rate": 90
        },
        {
          "id": 15,
          "name": "Lorry",
          "priceInCents": 10000,
          "rate": 55
        },
        {
          "id": 16,
          "name": "Little hare",
          "priceInCents": 6400,
          "rate": 97
        },
        {
          "id": 17,
          "name": "Bricks",
          "priceInCents": 1500,
          "rate": 100
        },
        {
          "id": 18,
          "name": "Rocking horse",
          "priceInCents": 10999,
          "rate": 10
        }
      ]
    }
  ]
}
10
  • <tr><th scope="row"> - а должен быть td? Опять же - приложите json)) только не копию из консоли, а то, что получаете с сервера 4 фев 2021 в 16:08
  • @АлексейШиманский Кажется, придется поставить Postman. ( Я смогу это только завтра сделать. Надеюсь, вы не передумаете мне помочь! Если сейчас это хоть как-то поможет, то сам сервер написан на Java Servlets API, и сериализуется с помощью Gson библиотеки, а каталог представляет из себя класс с одним полем List<Category>, категория, в свою очередь, имеет поле List<Product> и название категории, ну а продукт - цену, рейтинг, название и айдишник. Сам JSON выглядит как массив(значение) ключа catalog. JSON отправляется выходным потоком PrintWriter в response
    – Elizaveta
    4 фев 2021 в 16:19
  • Да postman не нужен, откройте консоль разработчика в браузере, посмотрите там ответ сервера. Например в хроме i.stack.imgur.com/zK6xY.png 4 фев 2021 в 16:25
  • Ну типа, catalog:[{title:"Food category", products:[{id:1, name:"meat", price:100,rate:95}] } ]
    – Elizaveta
    4 фев 2021 в 16:27
  • Оу) так он на скрине, с консоли
    – Elizaveta
    4 фев 2021 в 16:27

2 ответа 2

1

Может быть немного избыточно, но кмк есть что-то в этом способе.

Можно наверное чуть упростить все эти шаблоны и работы с шаблонными строками. Но пока можно так:

let getProductsTableHeadHtml = () => {
  return `
          <thead>
              <th scope="col">Id</th>
              <th scope="col">Name</th>
              <th scope="col">Price (in cents)</th>
              <th scope="col">Rate</th>
          </thead>`;
};

let getProductsTableBodyHtml = (products = []) => {
  let bodyHtml = '<tbody>';

  for (product of products) {
    bodyHtml += getProductRowHtml(product);
  }

  bodyHtml += '</tbody>';

  return bodyHtml;
};

let getProductsTable = (products = []) => {
  return `<table class="table">
          ${getProductsTableHeadHtml()}
          ${getProductsTableBodyHtml(products)}
          </table>`;
};

let getProductRowHtml = (product) => {
  return `
          <tr scope="row">
              <td>${product.id}</td>
              <td>${product.name}</td>
              <td>${product.priceInCents}</td>
              <td>${product.rate}</td>
          </tr>`;
};

let getCategoryHtml = (data) => {
  let categoryHtml = '';

  for (let category of data.categories) {
    categoryHtml += `
          <div class="alert alert-info text-center">
              <h3>${category.title}</h3>
              ${getProductsTable(category.products)}
          </div>`;
  }

  return categoryHtml;
};

//------------------------------

var data = {
  "categories": [{
      "id": 1,
      "title": "Clothes category",
      "products": [{
          "id": 1,
          "name": "Sweater",
          "priceInCents": 65458,
          "rate": 45
        },
        {
          "id": 2,
          "name": "Jacket",
          "priceInCents": 11111,
          "rate": 89
        },
        {
          "id": 3,
          "name": "Coat",
          "priceInCents": 9999,
          "rate": 36
        },
        {
          "id": 4,
          "name": "Vest",
          "priceInCents": 1200,
          "rate": 68
        },
        {
          "id": 5,
          "name": "Shorts",
          "priceInCents": 45000,
          "rate": 90
        },
        {
          "id": 6,
          "name": "Casual dress",
          "priceInCents": 36500,
          "rate": 79
        }
      ]
    },
    {
      "id": 2,
      "title": "Food category",
      "products": [{
          "id": 7,
          "name": "Meet",
          "priceInCents": 2132,
          "rate": 100
        },
        {
          "id": 8,
          "name": "Cookies",
          "priceInCents": 1111,
          "rate": 90
        },
        {
          "id": 9,
          "name": "Bread",
          "priceInCents": 777,
          "rate": 85
        },
        {
          "id": 10,
          "name": "Apples",
          "priceInCents": 454,
          "rate": 32
        },
        {
          "id": 11,
          "name": "Ice cream",
          "priceInCents": 873,
          "rate": 79
        }
      ]
    },
    {
      "id": 3,
      "title": "Toys category",
      "products": [{
          "id": 13,
          "name": "Barbie",
          "priceInCents": 12345,
          "rate": 80
        },
        {
          "id": 14,
          "name": "Cycle",
          "priceInCents": 65432,
          "rate": 90
        },
        {
          "id": 15,
          "name": "Lorry",
          "priceInCents": 10000,
          "rate": 55
        },
        {
          "id": 16,
          "name": "Little hare",
          "priceInCents": 6400,
          "rate": 97
        },
        {
          "id": 17,
          "name": "Bricks",
          "priceInCents": 1500,
          "rate": 100
        },
        {
          "id": 18,
          "name": "Rocking horse",
          "priceInCents": 10999,
          "rate": 10
        }
      ]
    }
  ]
};


$("#catalog").html(getCategoryHtml(data));
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="catalog"></div>

1
  • ого, круто выглядит. Спасибо!)
    – Elizaveta
    5 фев 2021 в 13:42
1

Вопросик решился. Вместо .append() я просто сложила строки плюсиком, like

let content += '<table class="table"><thead><tr>' + 
                '<th scope="col">Id</th>'...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.