How to equate id of object array with key on the loop? Javascript

Question

My javascript code like this :

<script type="text/javascript">
      var photoList = [{id:"1", name:"hazard.jpg"}, {id:"3", name:"ronaldo.jpg"}, {id:"5", name:"messi.jpg"}];
      var res = "";
      for(var i = 0; i < 5; i++) {
          if((photoList[i] !== undefined) && (photoList[i].id !== null)) {
              res +=  `<li id="thumbnail-view-`+i+`">
                              <div class="thumbnail">
                                  <img src="/img/products/thumbs/`+photoList[i].name+`" alt="">                          
                                  <ul class="list-inline list-edit">
                                      <li>
                                          <a href="#" class="text-danger" id="delete-image-`+i+`"
                                             data-toggle="modal"
                                             data-target="#modal-delete-image-`+i+`"
                                             data-photo='${JSON.stringify(photoList)}'                                  
                                          >
                                              <span class="fa fa-trash"></span>
                                          </a>                                   
                                      </li>
                                  </ul>
                              </div>
                          </li>`;             
          }
          else {
              res += `<li id="thumbnail-upload-`+i+`">
                          <a href="#" class="thumbnail thumbnail-upload" id="add-image-`+i+`"
                             title="Add photo"
                             data-toggle="modal"
                             data-target="#modal-add-image-`+i+`"
                          >
                              <span class="fa fa-plus fa-2x"></span>
                          </a>
                      </li>`;
          }
      }
      $('ul.list-photo').html(res);
</script>

Demo and full code like this : https://jsfiddle.net/oscar11/L6xctxze/

var photoList have dinamic data. The variable can look like this :

var photoList = [{id:"3", name:"ronaldo.jpg"}, {id:"4", name:"ozil.jpg"}, {id:"5", name:"messi.jpg"}];

The variable can look too like this :

var photoList = [{id:"1", name:"hazard.jpg"}, {id:"5", name:"messi.jpg"}];

etc. So it's dinamic

I want if the variable have id = 1, then the image is placed in box number 1. If the variable have id = 5, then the image is place in box number 5. Etc

If the variable like this :

var photoList = [{id:"1", name:"hazard.jpg"}, {id:"5", name:"messi.jpg"}];

Then the image is place in box number 1 and number 5

While in box 2, 3, 4 contains the icon +

How can I do it?

I try like above code, but it's still wrong

duplicate of this post: stackoverflow.com/questions/44600855/… — OmG
– OmG, Commented Jun 17, 2017 at 8:20

maazadeeb · Accepted Answer · 2017-06-17 09:13:25Z

1

Here is a fiddle of a solution https://jsfiddle.net/jq1y75bg/1/.

The problem in your code is that you're iterating over the photoList array and checking (photoList[i] !== undefined) && (photoList[i].id !== null), which is never false till your photoList array is completely iterated over. That is why you're getting 3 items next to each other.

Instead, you could maintain a map of id to name and check that in the loop. Something like this:

var photoMap = photoList.reduce(function(acc, p) {
    acc[Number(p.id)] = p.name;
    return acc;
}, {});

for (var i = 1; i <= 5; i++) {
    if (photoMap[i]) {
        /* An item exists for this index, whose name is photoMap[i] */
    } else {
        /* An item does not exist for this index */
    }
}

edited Jun 17, 2017 at 9:13

answered Jun 17, 2017 at 8:54

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

samuel toh Over a year ago

On the console exist error : ReferenceError: mIds is not defined

samuel toh Over a year ago

I have seen your answer. It looks like your answer is right. But I want to ask. Actually I have 1 more index in object array like this :

var photoList = [{id:"1", name:"hazard.jpg", alt:"hazard alt"}, {id:"3", name:"ronaldo.jpg"}, {id:"5", name:"messi.jpg", alt:"messi alt"}];

. If on your answer, it does not seem to be able to display alt

maazadeeb Over a year ago

alt property wasn't mentioned in the question or the fiddle. But if you're saying you have multiple properties that you'd like to use, then you could change acc[Number(p.id)] = p.name to acc[Number(p.id)] = p and access photoMap[i].name and photoMap[i].alt in the loop.

samuel toh Over a year ago

Great. It works. Your answer is simple. I understand more easily. Thanks

Riaz Laskar · Accepted Answer · 2017-06-17 08:59:39Z

this should do the job :

    var photoList = [{id:"1", name:"hazard.jpg"}, {id:"3", name:"ronaldo.jpg"}, {id:"5", name:"messi.jpg"}];
          var res = "";
    // create the positions a blank array of length 5 all undefined
    var list = Array(5);
    for(var i = 0; i < photoList.length; i++) {
      var p = photoList[i];
      // insert the image with id at the appropriate position
      list[p.id-1] = p; 
    }

   // create the markup with list
    for(var i = 0; i < list.length; i++) {
    var p = list[i];
              if(p) {
                  res +=  `<li id="thumbnail-view-`+i+`">
                                  <div class="thumbnail">
                                      <img src="/img/products/thumbs/`+p.name+`" alt="">                          
                                      <ul class="list-inline list-edit">
                                          <li>
                                              <a href="#" class="text-danger" id="delete-image-`+i+`"
                                                 data-toggle="modal"
                                                 data-target="#modal-delete-image-`+i+`"
                                                 data-photo='${JSON.stringify(photoList)}'                                  
                                              >
                                                  <span class="fa fa-trash"></span>
                                              </a>

                                          </li>
                                      </ul>
                                  </div>
                              </li>`;

              }
              else {
                  res += `<li id="thumbnail-upload-`+i+`">
                              <a href="#" class="thumbnail thumbnail-upload" id="add-image-`+i+`"
                                 title="Add photo"
                                 data-toggle="modal"
                                 data-target="#modal-add-image-`+i+`"
                              >
                                  <span class="fa fa-plus fa-2x"></span>
                              </a>
                          </li>`;
              }
          }
    $('ul.list-photo').html(res);

fiddle https://jsfiddle.net/riazxrazor/L6xctxze/1/

Oluwafemi Sule · Accepted Answer · 2017-06-17 09:44:03Z

You can hold the first (id:1) and last(id:5) in separate variables. Build up markup for the icons and concat all.

function makePhoto(photo, i) {
  return `
    <li id="thumbnail-view-${i}">
      <div class="thumbnail">
        <img src="/img/products/thumbs/${photo.name}" alt="${photo.alt || ''}">                          
          <ul class="list-inline list-edit">
             <li>
                <a href="#" 
                   class="text-danger"
                   id="delete-image-${i}"
                   data-toggle="modal"
                   data-target="#modal-delete-image-${i}"
                   data-photo='${JSON.stringify(photo)}'
                >
                  <span class="fa fa-trash"></span>
                </a>
               </li>
            </ul>
        </div>
    </li>
  `;
}

function makeIcon(i) {
  return `
    <li id="thumbnail-upload-${i}">
      <a href="#"
         class="thumbnail thumbnail-upload"
         id="add-image-${i}"
         title="Add photo"
         data-toggle="modal"
         data-target="#modal-add-image-${i}"
      >
        <span class="fa fa-plus fa-2x"></span>
      </a>
    </li>`;
}

var photoList = [{
  id: "1",
  name: "hazard.jpg"
}, {
  id: "3",
  name: "ronaldo.jpg"
}, {
  id: "5",
  name: "messi.jpg"
}];


var first = "", rest="", last = "", photo;

for (var i = 0; i < 5; i++) {
  photo = photoList[i];
  if (photo && photo.id) {
    
    if (+photo.id == 1)
      first = makePhoto(photo, i);
    else if (photo.id == 5)
      last = makePhoto(photo, i);
    else {
      rest += makeIcon(i);
    }
  } else {
    rest += makeIcon(i);
  }
}
first = first || makeIcon(0);
last = last || makeIcon(4);
$('ul.list-photo').html(first + rest + last);

<style type="text/css">ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
}

.list-inline>li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.428571429;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border 0.2s ease-in-out;
  transition: border 0.2s ease-in-out;
}

.thumbnail>img,
.thumbnail a>img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.thumbnail .caption {
  padding: 9px;
  color: #333333;
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #333333;
}

ul.list-photo>li>a.thumbnail-upload:hover,
ul.list-photo>li>a.thumbnail-upload:focus,
ul.list-photo>li>a.thumbnail-upload:active {
  border-color: #337ab7;
  color: #337ab7;
}

ul.list-photo>li>.thumbnail {
  display: table-cell;
  width: 120px;
  height: 120px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

ul.list-photo>li>.thumbnail>a.thumbnail-check {
  top: 0;
  right: 5px;
  position: absolute;
}

ul.list-photo>li>.thumbnail>a.thumbnail-check:hover {
  color: #5cb85c;
}

ul.list-photo>li>.thumbnail.thumbnail-main {
  background-color: #dff0d8;
  border: 1px solid #5cb85c;
}

ul.list-photo>li>.thumbnail.thumbnail-main>a.thumbnail-check {
  color: #5cb85c;
}

ul.list-photo>li>.thumbnail>img {
  max-height: 100%;
  max-width: 100%;
}

ul.list-photo>li>.thumbnail>ul.list-edit {
  background-color: rgba(255, 255, 255, 0.7);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  bottom: 0;
  margin-left: -4px;
  position: absolute;
  width: 100%;
}

ul.list-photo>li>.thumbnail>ul.list-edit>li {
  padding: 0;
  display: table-cell;
  width: 1%;
}

ul.list-photo>li>.thumbnail>ul.list-edit>li>a {
  display: block;
  padding: 5px 0;
}

ul.list-photo>li>.thumbnail>ul.list-edit>li>a:hover,
ul.list-photo>li>.thumbnail>ul.list-edit>li>a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}

ul.list-photo>li>.thumbnail-upload,
ul.list-photo>li .thumbnail-slot {
  border-style: dashed;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="list-inline list-photo">
</ul>

After a re-read I think I understand what you're trying to solve here. What should be the result if photoList items don't have an id of 1 and 5

Collectives™ on Stack Overflow

How to equate id of object array with key on the loop? Javascript

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related