2

Been working on this bit for ages and can't seem to work it out. On my webpage, I click a photo (or if no photo has been uploaded yet, a font-awesome icon). That click opens a modal and passes it an ID. As soon as the modal opens, it sends an ajax request to php, with that passed ID. The query uses PDO ( fetchAll(PDO::FETCH_ASSOC) ) and that returns this dataset to my calling script.

[{"id":"200925","image_name":"IMG_7160.JPG","img_seq":"1"}, 
{"id":"200929","image_name":"IMG_7161.JPG","img_seq":"2"}, 
{"id":"201014","image_name":"IMG_7183.JPG","img_seq":"3"}]

What is this dataset called in JS? Object? Array of arrays? Else? What is the best way to loop through this resultset so I can output the images in the modal.

Dharman
  • 30,962
  • 25
  • 85
  • 135
headache
  • 125
  • 9

2 Answers2

2

Regarding your question about the type. Its an array containing objects. To access the properperties and its value of each object you need to loop through it.

To check what type of your data you can use typeof explained here

To loop through your array and objects you can use forEach() more info you can be seen about forEach loop and how to use it - Check here

Working demo to load your and images details data in a modal: https://jsfiddle.net/usmanmunir/qm4w75ga/27/

var array = [
  {"id":"200925","image_name":"IMG_7160.JPG","img_seq":"1"}, 
  {"id":"200929","image_name":"IMG_7161.JPG","img_seq":"2"}, 
  {"id":"201014","image_name":"IMG_7183.JPG","img_seq":"3"}
]

array.forEach(function(element){
     $('.modal-card-body').append('<b>Seq:</b>'+element.img_seq+' - <b>ID:</b>'+element.id+' - <b>Name:</b>'+element.image_name+'<br>')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
  </head>
  <body>
    <div class="modal is-active">
       <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Modal title</p>
          <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
          
        </section>
        <footer class="modal-card-foot">
          <button class="button is-success">Save changes</button>
          <button class="button">Cancel</button>
        </footer>
      </div>
    </div>
  </body>
</html>
Always Helping
  • 14,316
  • 4
  • 13
  • 29
  • Blimey, much more than I was asking. Many thanks for taking the time. I wonder if the result set I get is a string because array.forEach errors out with...array.forEach is not a function. – headache Jun 17 '20 at 04:21
  • Glad that i helped you. Do not forger to up-vote and accept this as an answer thanks. – Always Helping Jun 17 '20 at 04:23
  • @headache Yes forEach will only work if the data you are trying access is an `array` not a string. Otherwise it will error out to be not a function. – Always Helping Jun 17 '20 at 04:24
  • Yep, it was a string as explained by typeof. V clunky to split into array, I think. lots of str.replace. But I got there in the end. Thnx. – headache Jun 17 '20 at 05:32
0

This is array of objects. JavaScript provide different methods to iterate through the array via using looping technique like for, forEach, for...of, map.

Please ,find the link to get whole idea : https://medium.com/chingu/looping-over-arrays-and-objects-in-javascript-57e1188c1ba2

solanki...
  • 4,982
  • 2
  • 27
  • 29