Разбивка данных на уровне пользовательского интерфейса с помощью NodeJS - PullRequest
Новая
       8

Разбивка данных на уровне пользовательского интерфейса с помощью NodeJS

0 голосов
/ 12 марта 2020

Node api Build 

const BOOKDATA = "book-database";

module.exports = function(app, db) {
  /*-----------------------------------------FETCHING DATA FROM MONGO-----------------------------------------------*/

  //Get data in frontend
  app.get("/api/bookdata", (req, res) => {
    const mydara = db.collection(BOOKDATA);
    const page = parseInt(req.query.page);
    const limit = parseInt(req.query.limit);
    const startIndex = (page - 1) * limit;
    const endIndex = page * limit;

    const results = {};

    if (endIndex < mydara.length) {
      results.next = {
        page: page + 1,
        limit: limit
      };
    }

    if (startIndex > 0) {
      results.previous = {
        page: page - 1,
        limit: limit
      };
    }

    mydara.find({}).toArray(function(err, result) {
      var obj = JSON.parse(JSON.stringify(result));
      if (err) {
        throw err;
      } else {
        results.results = obj.slice(startIndex, endIndex);
        res.send(results);
        console.log(results);
      }
    });
  });
};

Клиентский API-интерфейс извлечен 

const hostUrl = "http://localhost:8080/";
let bookContainer = document.getElementById("bookInfo");

function bookDataDisplay() {
  let card = document.createElement("div");
  card.className = "card-header";
  let footerData = document.createTextNode("Footer");
  card.appendChild(footerData);
  let cardBody = document.createElement("div");
  cardBody.className = "card-body";
  let heading = document.createElement("h5");
  heading.className = "card-title";
  let titleData = document.createTextNode("Special Title Treatement");
  heading.appendChild(titleData);
  let para = document.createElement("p");
  para.className = "card-text";
  let paraData = document.createTextNode(
    "With supporting text below as a natural lead-in to additional content."
  );
  para.appendChild(paraData);
  cardBody.appendChild(heading);
  cardBody.appendChild(para);
  bookContainer.appendChild(card);
  bookContainer.appendChild(cardBody);
}

bookDataDisplay();

async function fetchBooks() {
  try {
    let response = await fetch(
      hostUrl + `api/bookdata?page=${PageNumber}&limit=${Limit}`,
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json"
        }
      }
    );
    console.log(response);
    response.json().then(matter => {
      console.log(matter);
    });
    if (response.status == 200) {
      console.log("the status is " + response.status);
    } else {
      console.log("the status is " + response.status);
    }
  } catch (error) {
    console.log("Error:" + error);
  }
}
fetchBooks();

HTML тело, которое я использую для карта дисплея : - 

<body>
    <div class="card mt-5 mr-5 ml-5" id="bookInfo"></div>
    <script src="http://localhost:8080/scripts/script.js"></script>
  </body>

В настоящее время я могу получить разбитые на страницы данные на стороне клиента в консоли на основе limit и page number. Когда я перехожу на уровень UI , становится все труднее отобразить данные и отобразить их в HTML. Я отображаю 20 данных на странице.

Тип данных, которые я использую: - 

_id:5e46f1818d6512212ca0b65c
book_id:26
goodreads_book_id:968
best_book_id:968
work_id:2982101
books_count:350
isbn:307277674
isbn13:9780307277670
authors:"Dan Brown"
original_publication_year:2003
original_title:"The Da Vinci Code"
title:"The Da Vinci Code (Robert Langdon, #2)"
image_url:"https://images.gr-assets.com/books/1303252999m/968.jpg"
small_image_url:"https://images.gr-assets.com/books/1303252999s/968.jpg"

Может кто-нибудь помочь мне разобраться в этом. Если требуется какая-либо другая деталь, пожалуйста, напишите в комментарии.

1 Ответ

0 голосов
/ 12 марта 2020

ОК, поэтому, как только вы получите данные с сервера, вам нужно отобразить их в браузере. Я вижу множество ошибок и улучшений в вашем коде, так что это будет руководство по работе.

index. html

<body>
    <div id="bookInfo"></div>
    <script src="http://localhost:8080/scripts/script.js"></script>
</body>

script. js

const bookDataDisplay = (data) => {
  //asuming data is an array of books
  const bookElements = data.reduce((str, book) => {
    str += `
      <div class="card">
        <div class="card-header">${book.title}</div>
      </div>
    `;
  }, '');

  document.getElementById('bookInfo').innerHTML = bookElements;
}

fetchBooks().then((data) => bookDataDisplay(data));
...