adding dynamic data to gallery

[harae37]

@nbriz

I merged the files and I have the updated repo, but I’m not sure from where (what file?or api?) I should be retrieving the data from. And I'm still a little confused with how to get the dynamic data into the gallery. So should I be starting off with fetch function?

[nbriz]

@harae37 great! here's the plan:

0. the file u're going to be converting from static to dynamic is the main index page (that's where the gallery is)

1. yes, it all starts w/fetch, u need to get the data before u can use it to dynamically create the content. that said, @jlee273 is still working on the API which will return all of the images shared from the addon (u can follow her progress on this PR) so in the mean time i've put together this URL for u to use. that's the URL u should pass into ur fetch function for now (then later when Jean is finished w/the API u can replace this URL w/hers which will be something like /api/images)

2. once u've got the fetch function working && grabbing the data from that test URL, it's time to create a function that creates the HTML elements dynamically. this is the equivalent of the newPost() function i made in the video tutorial i sent. except that u need to make ur own newPost function following the same logic. In the video i explain how u need to essentially recreate the HTML structure of a "post" via JavaScript. In ur case the HTML structure u're recreating in JavaScript is the structure that @SlShannon put together for a post, which looks like this:

   <div class="box">
     <div class="imgBox">
       <img src="img/img2.jpg">
     </div>
     <div class="details">
       <div class="content">
           <h2> Facebook | Duration </h2>
       </div>
     </div>
   </div>

   which should get inserted into (aka "appended") the <div class="container"> element

[harae37]

@nbriz Hi, I'm trying to figure out the fetch function but somehow the request and response functions aren't working. Can you please check what I'm missing? I pushed it into my forked repo

[nbriz]

@harae37 u're trying to log json.results[0].title but this assumes the json response u're getting looks something like this:

{
  "results": [
    { "title": "something" },
    { "title": "something else" }
  ]
}

that made sense in my example where i was using the star wars api (b/c it sends data back that looks like that), but ur json doesn't look like that, it looks like this:

[
  "img/img1.jpg",
  "img/img2.jpg",
  "img/img3.jpg",
  "img/img4.jpg",
  "img/img5.jpg",
  "img/img6.jpg",
  "img/img7.jpg",
  "img/img8.jpg",
  "img/img9.jpg"
]

so u can log things like json[0] or even just try logging the whole thing json

[harae37]

@nbriz so does that mean I'm supposed to get

[ "img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", "img/img9.jpg" ]

when I go to the api's link? After relaunching the json in terminal?

[nbriz]

@harae37 it depends, if u console.log(json[0]) then u'll only see the first (ie. [0]) item in the array, which would be "img/img1.jpg", but if u console.log(json) (the array itself) then u should see the whole list show up in ur console

[harae37]

@nbriz Okay, I think I got the fetch function working (the console was filled with background script stuff so I couldn't find it.)

And to make my own newPost function do I name it differently to match it to div class='container' ?

[nbriz]

no, u can still call it 'newPost' the part that needs to change is the inside. so in my exmaple i have a global variable i define called imgPosts this is the parent container where the new posts go, it looks like this:

const imgPosts = document.querySelector('#image-posts')

but ur parent container is that div with a class of container so ur global variable should look something more like this:

const container = document.querySelector('.container')

ur newPost function can still be called "newPost" but needs to have different code inside, b/c remember what u need to do is recreate this:

    <div class="box">
      <div class="imgBox">
        <img src="img/img2.jpg">
      </div>
      <div class="details">
        <div class="content">
            <h2> Facebook | Duration </h2>
        </div>
      </div>
    </div>

...but w/javascript inside the new post function, for example...

newPost (filepath) {
  const box = document.createElement('div')
  box.className = 'box'
  // etc... etc...
  // rest of ur code here
  // && lastly...
  content.appendChild(box)
}

[harae37]

@nbriz I wrote the code with newPost but I'm not sure what's supposed to happen when it's there??

function newPost(filepath){ const box = document.createElement('div') box.className = 'box' const img = document.createElement('img') img.src = filepath const ovr = document.createElement('div') ovr.className = 'overlay' ovr.textContent = //filepath post.appendChild(img) post.appendChild(ovr) content.appendChild(box) }

[nbriz]

@harae37 i'm going to send u a video i made which i think might clear things up