Как создать несколько объектов, каждый из которых загружает одну и ту же страницу, но с разными данными в JavaScript? - PullRequest
Новая
       7

Как создать несколько объектов, каждый из которых загружает одну и ту же страницу, но с разными данными в JavaScript?

0 голосов
/ 08 января 2019

У меня возникли некоторые проблемы при попытке создать на странице несколько разных объектов, которые будут отправлять запрос get на один и тот же URL-адрес, но с разными параметрами в запросе. Сервер должен вернуть страницу, но с другими данными, основанными на том, какой объект был нажат, чтобы сделать запрос. Это своего рода подборщик профилей. Например, если я нажимаю на фотографию человека 1, это приводит меня к странице его профиля, но если я нажимаю на фотографию человека 2, это приводит меня к странице профиля человека 2.

Каждый человек имеет уникальный идентификатор, связанный с его профилем в моей базе данных, к которому у меня есть доступ в моем клиентском javascript. Я хочу включить этот идентификатор в часть моего запроса к серверу при нажатии на фотографию профиля пользователя x.

Ниже приведен код на стороне клиента, который у меня есть. 

//Create row element to be appended to the body
        var newRow = document.createElement("div");
        newRow.className = "row";

        //Iterate through the returned array of JSON objects
        for (i = 0; i < response.length; i++)
        {
        //Create new columns to be appended to the row
          var newCol = document.createElement("div");
          newCol.className = "col-lg-4 col-sm-6 text-center mb-4";

          //Create new image object from data in response
          var image = new Image();
          image.src = '/uploads/' + response[i].pic;
          image.className = "rounded-circle d-block mx-auto patient-img";

          var patId = response[i].Id

          //Create new anchor object
          var link = document.createElement("a");
          link.href = 'javascript:loadProfile()'; //When clicked will call function that sends get request to /profile

          link.appendChild(image);

          newCol.appendChild(link);    

          //Get patient name from response
          var patName = document.createElement("h3");

          patName.innerHTML = response[i].name;

          newCol.appendChild(patName);

          //Append the full column to the row
          newRow.appendChild(newCol);
        }

Я хочу включить идентификатор человека как часть моего вызова loadProfile (), но я не уверен, как это сделать. Должен ли я попытаться просто добавить Id лиц к href объекта привязки и сделать запрос get подобным образом? Я использую express.js для веб-сервера, jquery для выполнения запросов на стороне клиента и mongoDB в качестве базы данных. Любая помощь или совет будет принята с благодарностью !!

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Если я правильно понял ваш вопрос, вы пытаетесь привязать обработчики событий к ссылкам. Вот DOM API, который вы должны использовать для этого EventTarget.addEventListener - вместо назначения link.href = 'javascript:...'.

Вы также должны помнить о создании таких функций в цикле

В целом у вас должно быть что-то вроде этого: 

function loadProfile(id) {
  return function() {
    /// do logic for fetching webserver here
  }
}

for (var i = 0; i < response.length; i++) {
  /// other code
  var link = document.createElement("a");
  link.addEventListener('click', loadProfile(response[i].Id));
}

Обратите внимание, что функция loadProfile теперь является функцией высшего порядка .

0 голосов
/ 08 января 2019

Одним из возможных решений в вашем случае (как вы упомянули) будет передача идентификатора методу loadProfile. Что-то вроде: 

link.href = 'javascript:loadProfile(' + var_with_id ')'; // where var_with_id is the id that you want to pass

и затем измените функцию loadProfile, чтобы получить параметр и использовать его (нам нужно было бы также увидеть эту функцию, чтобы помочь больше): 

function loadProfile() { // or similar

до 

function loadProfile(id) { // or similar, and then use id in the code

Однако это не выглядит хорошим способом сделать это, лучше было бы связать обработчик события click (так как вы уже упоминали об использовании jQuery).

Кроме того, вы можете использовать jQuery для создания элементов вместо старомодного ванильного способа.

...