пытаюсь обновить карту по нужному адресу

Question

Я пытаюсь обновить изображение карты, когда я показываю все адреса.У меня есть 5 адресов, но он показывает только одну карту, и это первая карта для всех 5 адресов.

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

        function startUp(){
            wireHandlers();
        };

        function getAddresses(){
            return [
            {'name': 'Facebook',
            'lineOne': '1 Hacker Way',
            'lineTwo': 'Menlo Park, CA 94025',
            'city': 'Menlo Park',
            'state': 'CA',
            'zipCode': '94025',
            'country': 'United States'},
            
            {'name': 'Buena Park Home',
            'lineOne': '6490 Crescent Ave',
            'lineTwo': 'Buena Park CA 90620',
            'city': 'Buena Park',
            'state': 'CA',
            'zipCode': 92804,
            'country': 'United States'},
            
            {'name': 'Home',
            'lineOne': '1030 N Magnolia Ave',
            'lineTwo': 'Anaheim CA 92801',
            'city': 'Anaheim',
            'state': 'CA',
            'zipCode': 92801,
            'country': 'United States'},
            
            {'name': 'Nationwide',
            'lineOne': '1360 E Walnut St',
            'lineTwo': 'Pasadena CA 91106',
            'city': 'Pasadena',
            'state': 'CA',
            'zipCode': 91106,
            'country': 'United States'},
            
            {'name': 'Seacliff Self Storage',
            'lineOne': '18100 Kovacs Ln',
            'lineTwo': 'Huntington Beach CA 92648',
            'city': 'Huntington Beach',
            'state': 'CA',
            'zipCode': 92648,
            'country': 'United States'}
            ]
        };

        function wireHandlers(){
            $('#showsAddresses').on('click', onShowAddresses);
            $('#emptyAddresses').on('click', emptyAllAddresses);
            $('.deleteAddress').on('click', onDeleteAddress);
        };

        function onShowAddresses(e){
            e.preventDefault();
            var addresses = getAddresses();
            console.log(addresses);
            renderAddresses(addresses);

        };

        function getTemplate(){
            return $($('#addressTemplate').html());
        };

        function renderAddresses(addressArr){
            for (let index = 0; index < addressArr.length; index++) {
                const template = getTemplate();
                template.find('.card-name').text(addressArr[index].name);
                template.find('.line-one').text(addressArr[index].lineOne);
                template.find('.line-two').text(addressArr[index].lineTwo);
                template.find('.city-name').text(addressArr[index].city);
                template.find('.state-name').text(addressArr[index].state);
                template.find('.zip-code').text(addressArr[index].zipCode);
                template.find('.country').text(addressArr[index].country);
                $('.clone-container').append(template);


            }
        };

        function emptyAllAddresses(){
            $('.clone-container').empty();
        };

        function onDeleteAddress(){
            // $('.deleteAddress').click(function(){
            // $('.deleteAddress').remove();
            // });
        };

Я пытаюсь обновить изображение карты, когда я показываю все адреса.У меня есть 5 адресов, но он показывает только одну карту, и это первая карта для всех 5 адресов.

    function renderAddresses(addressArr){
        for (let index = 0; index < addressArr.length; index++) {
            const template = getTemplate();
            template.find('.card-name').text(addressArr[index].name);
            template.find('.line-one').text(addressArr[index].lineOne);
            template.find('.line-two').text(addressArr[index].lineTwo);
            template.find('.city-name').text(addressArr[index].city);
            template.find('.state-name').text(addressArr[index].state);
            template.find('.zip-code').text(addressArr[index].zipCode);
            template.find('.country').text(addressArr[index].country);
            $('.clone-container').append(template);


        }
    };

Answer 1

Вы можете рассмотреть возможность использования $.each().Вот пример:

function startUp() {
  wireHandlers();
};

function getAddresses() {
  return [{
      'name': 'Facebook',
      'lineOne': '1 Hacker Way',
      'lineTwo': 'Menlo Park, CA 94025',
      'city': 'Menlo Park',
      'state': 'CA',
      'zipCode': '94025',
      'country': 'United States'
    },
    {
      'name': 'Buena Park Home',
      'lineOne': '6490 Crescent Ave',
      'lineTwo': 'Buena Park CA 90620',
      'city': 'Buena Park',
      'state': 'CA',
      'zipCode': 92804,
      'country': 'United States'
    },
    {
      'name': 'Home',
      'lineOne': '1030 N Magnolia Ave',
      'lineTwo': 'Anaheim CA 92801',
      'city': 'Anaheim',
      'state': 'CA',
      'zipCode': 92801,
      'country': 'United States'
    },
    {
      'name': 'Nationwide',
      'lineOne': '1360 E Walnut St',
      'lineTwo': 'Pasadena CA 91106',
      'city': 'Pasadena',
      'state': 'CA',
      'zipCode': 91106,
      'country': 'United States'
    },
    {
      'name': 'Seacliff Self Storage',
      'lineOne': '18100 Kovacs Ln',
      'lineTwo': 'Huntington Beach CA 92648',
      'city': 'Huntington Beach',
      'state': 'CA',
      'zipCode': 92648,
      'country': 'United States'
    }
  ];
};

function wireHandlers() {
  $('#showsAddresses').on('click', onShowAddresses);
  $('#emptyAddresses').on('click', emptyAllAddresses);
  $('.deleteAddress').on('click', onDeleteAddress);
};

function onShowAddresses(e) {
  e.preventDefault();
  var addresses = getAddresses();
  console.log(addresses);
  renderAddresses(addresses);
};

function getTemplate() {
  var clone = $("#addressTemplate").html();
  return $(clone);
};

function renderAddresses(addressArr) {
  var temp;
  $.each(addressArr, function(i, a) {
    temp = getTemplate();
    $(".card-name", temp).html(a.name);
    $(".line-one", temp).html(a.lineOne);
    $(".line-two", temp).html(a.lineTwo);
    $(".city-name", temp).html(a.city);
    $(".state-name", temp).html(a.state);
    $(".zip-code", temp).html(a.zipCode);
    $(".country", temp).html(a.country);
    $('.clone-container').append(temp);
  });
};

function emptyAllAddresses() {
  $('.clone-container').html("");
};

function onDeleteAddress() {
  $(this).parent().remove();
};

Подробнее: jQuery.each ()

Если это не работает, вы можете проверить свою функцию getTemplate() иможет рассмотреть возможность использования .prop("outerHTML").