试图将 map 更新到正确的地址

Question

I'm trying to update the map image when i show all the addresses. i have 5 addresses but it's only showing one map and it's the first map for all 5 addresses.

but everytime i click on show addresses, it just gives me the same template of the map. how do i code where the map would change to the address listed in my get addresses function.

 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(); // }); };

I'm trying to update the map image when i show all the addresses. i have 5 addresses but it's only showing one map and it's the first map for all 5 addresses.

    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

You might consider using $.each() . Here is an example:

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();
};

See more: jQuery.each()

If it's not working, you may want to review your getTemplate() function and may consider using .prop("outerHTML") .