Increment JSON Data Array by One

Question

I'm wondering why this i+=1 doesn't increment the array by 1. When I click on the button the entire array length is shown. Can someone advise me what I'm doing wrong. I'm trying to load JSON data from WP related to posts with a certain category. This category I'm loading (http://localhost:8888/wordpress/wp-json/wp/v2/photos?categories=12) has 2 posts total. When I console.log postsData.length, I get the value of 2. When I console log postsData I receive Object, Object Object, Object. These posts both load at the same time when the button is clicked, but I want the posts or each object to load 1 at a time. Below is the code:

var portfolioPostsBtn = document.getElementById("portfolio-posts-btn");
var portfolioPostsContainer = document.getElementById("portfolio-posts-container");

if (portfolioPostsBtn){
portfolioPostsBtn.addEventListener("click", function(){
      var ourRequest = new XMLHttpRequest();
      ourRequest.open('GET', 'http://localhost:8888/wordpress/wp-json/wp/v2/photos?categories=12');
      ourRequest.onload = function() {
        if (ourRequest.status >= 200 && ourRequest.status < 400) {
          var data = JSON.parse(ourRequest.responseText);
          //console.log(data);
          createHTML(data);

        } else {
          console.log("We connected to the server, but it returned an error.");
        }
      };

      ourRequest.onerror = function() {
        console.log("Connection error");
};

ourRequest.send();

});
}

function createHTML(postsData){
  var ourHTMLString = '';
// This for loop doesn't increment by 1
  for (var i=0; i<postsData.length; i += 1){
    console.log(postsData.length);
    ourHTMLString += '<h2>' + postsData[i].title.rendered + '</h2>';
    ourHTMLString += '<img class="gallery-test" src="' +postsData[i].acf.image + '"">'
  }
  portfolioPostsContainer.innerHTML = ourHTMLString;
}

Please console.log the postsData argument. Add it to your question. You can check if it is in fact an array with Array.isArray(postsData) — Abraham Labkovsky
– Abraham Labkovsky, Commented Apr 19, 2020 at 23:40
Hello Abraham I console log Array.isArray(postsData) and receive true back. I added the other info to question. — Elizabeth
– Elizabeth, Commented Apr 19, 2020 at 23:49
array.length is not 0 indexed. if it says 1, it is 1. Can you log the response text before parsing it? — Abraham Labkovsky
– Abraham Labkovsky, Commented Apr 19, 2020 at 23:57

user3366943 · Accepted Answer · 2020-04-22 02:06:27Z

1

let me try to understand your question correctly. if you're trying to just display one single post per click. here's what i think you may try:

let portfolioPostsBtn = document.getElementById("portfolio-posts-btn");
let portfolioPostsContainer = document.getElementById("portfolio-posts-container");

// keep the payload to avoid unnecessary data requests
let postsData = [];

// using this to track click history to display the next post
let counter = 0;

/** not needed for disabling the button **/
// cycle (postsData.length) one by one starting at index 0
// for ex, if there are 3 posts, it would do 0, 1, 2, 0, 1, 2, to eons
// const incrementCounter = () => {
// counter = (counter + 1)%(postsData.length)
// };

// create post html if there is postsData
postsData.length && createHTML();

if (portfolioPostsBtn && !postsData.length){
portfolioPostsBtn.addEventListener("click", function(){
      let ourRequest = new XMLHttpRequest();
      ourRequest.open('GET', 'http://localhost:8888/wordpress/wp-json/wp/v2/photos?categories=12');
      ourRequest.onload = function() {
        if (ourRequest.status >= 200 && ourRequest.status < 400) {
          let data = JSON.parse(ourRequest.responseText);
          //console.log(data);
          postsData = data;
          createHTML();

        } else {
          console.log("We connected to the server, but it returned an error.");
        }
      };

      ourRequest.onerror = function() {
        console.log("Connection error");
};

ourRequest.send();

});
}


function disableButton () {
  // this would only work if portfolio-posts-btn is an actual button,
  // otherwise, you'll need to disable the listener and show the
  // user the btn is disabled somehow
  portfolioPostsBtn.setAttribute('disable', true);
}

function createHTML() {
  const strTemplate = `
    <h2>${postsData[counter].title.rendered}</h2>
    <img class="gallery-test" src="${postsData[counter].acf.image}">`;
  // append to the added posts
  portfolioPostsContainer.innerHTML += strTemplate;
  counter++;
  postsData.length === counter && disableButton();
}

edited Apr 22, 2020 at 2:06

answered Apr 20, 2020 at 2:14

user3366943

2631 silver badge6 bronze badges

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

18 Comments

Phil Over a year ago

"var is a global variable" 👈 that is incorrect. Using const would also result in an error

user3366943 Over a year ago

just read your comment about wanting to display the objects one at a time. to do this, you'll need to let payload = [], counter = 0; 1. store the postsData payload in an array 2. create html template with postsData[counter] 3. add one to the counter 4. have a check from the btn click to see if payload.length is true, if so, dont fetch again, just create the html template

user3366943 Over a year ago

@Phil var is a globally scoped variable in Javascript, but yes const would in a for loop since it increments i, however, let would not.

user3366943 Over a year ago

the article below and tons others have pointed out the difference between using var and let inside of a for loop --- medium.com/front-end-developers/…

Phil Over a year ago

I never mentioned anything about using var vs let. What I'm pointing out is that your statement "var is a global variable" is incorrect. I was also incorrect in saying "var has block scope", it has closure scope.

|

Collectives™ on Stack Overflow

Increment JSON Data Array by One

1 Answer 1

18 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Related