Re: Javascript function error. - JavaScript Discussion Boards

Re: Javascript function error.

Richard Deeming10-Jun-20 2:26

Richard Deeming

10-Jun-20 2:26

Try something like this:

JavaScript

$(function(){
    // Convert either "HH.mm" or "HH:mm" to the number of minutes since midnight
    var parseMinutes = function(value){
        var parts = value.split(/[.:]/g);
        switch (parts.length) {
            case 1: {
                return parseFloat(parts[0]) * 60;
            }
            case 2: {
                var hours = parseFloat(parts[0]);
                var minutes = parseFloat(parts[1]);
                return (hours * 60) + minutes;
            }
            default: {
                return 0;
            }
        }
    };
    
    // Format a number of minutes as "HH:mm"
    var formatMinutes = function(minutes){
        var hours = Math.floor(minutes / 60);
        minutes %= 60;
        
        return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
    };
    
    var updateHoursOpen = function(){
        var openingTime = $("#opening-time").val();
        var closingTime = $("#closing-time").val();
        
        var openingMinutes = parseMinutes(openingTime);
        var closingMinutes = parseMinutes(closingTime);
        var minutesOpen = closingMinutes - openingMinutes;
        
        // If closing is before opening, the time spans midnight. Add a day's worth of minutes:
        if (minutesOpen < 0) {
            minutesOpen += 1440;
        }
        
        var hoursOpen = formatMinutes(minutesOpen);
        $("#hoursOpen").val(hoursOpen);
        return hoursOpen;
    };
    
    // Update the hours when either input is changed:
    $("#opening-time, #closing-time").keyup(updateHoursOpen);
});

Demo[^]

NB: padStart doesn't work in Internet Explorer. But since even Microsoft agree that IE isn't a browser[^], it's usually safe to ignore it these days.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Javascript function error.

and180y10-Jun-20 2:55

and180y

10-Jun-20 2:55

Richard, thankyou so much for that, weirdly I'm still not getting a value for hours open.
Sticking my head in the oven is starting to look appealing. Laugh | :laugh:

Re: Javascript function error.

and180y11-Jun-20 0:06

and180y

11-Jun-20 0:06

Richard, my apologies. It has oft been said "there are none so blind as them that cannot see"

Your code does work, I just wasn't looking at it correctly. D'Oh! | :doh:

Is there a way I can make it work for each day from the same code or would it need that code for each day?

Thanks for your help so far. Smile | :)

Re: Javascript function error.

Richard Deeming11-Jun-20 0:30

Richard Deeming

11-Jun-20 0:30

I'm not sure what you mean by "each day"? Do you mean you have multiple sets of inputs for opening time, closing time, and hours?

You can't use the same ID for multiple elements in the same HTML document. You'll need to find a different way of identifying the elements, and linking the three <input> elements for a given day together. For example, you could use the class attribute:

HTML

<div class="opening-day">
    <p>Monday</p>
    <p>
        <label>
            Opening:
            <input type='text' class='opening-time' value='00:00'>
        </label>
    </p>
    <p>
        <label>
            Closing:
            <input type='text' class='closing-time' value='00:00'>
        </label>
    </p>
    <p>
        Result:
        <input type='text' class='hours-open' value='00:00' readonly>
    </p>
</div>

JavaScript

var updateHoursOpen = function($div){
    var openingTime = $div.find(".opening-time").val();
    var closingTime = $div.find(".closing-time").val();
    
    var openingMinutes = parseMinutes(openingTime);
    var closingMinutes = parseMinutes(closingTime);
    var minutesOpen = closingMinutes - openingMinutes;
    if (minutesOpen < 0) {
        minutesOpen += 1440;
    }
    
    var hoursOpen = formatMinutes(minutesOpen);
    $div.find(".hours-open").val(hoursOpen);
    return hoursOpen;
};

$(".opening-day").on("keyup", ".openingtime, .closing-time", function(){
    var $div = $(this).closest(".opening-day");
    updateHoursOpen($div);
});

Demo[^]
.find() | jQuery API Documentation[^]
.closest() | jQuery API Documentation[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Javascript function error.

and180y11-Jun-20 0:45

and180y

11-Jun-20 0:45

Hi Richard, thanks so much.

Yes basically the page has all 7 days, a check box if open that day and input boxes for opening and closing hours and the hours open.
I will use the code above. thankyou.

Re: Javascript function error.

DerekT-P11-Jun-20 3:26

DerekT-P

11-Jun-20 3:26

Saw this thread, and suddenly had awful deja vu back to 17th Feb 1999[^]

(This is one of my all-time favourite Dilberts, simply because I see it in real life so often!)

Re: Javascript function error.

jkirkerx12-Jun-20 8:57

jkirkerx

12-Jun-20 8:57

I know I'm late on this, but 0 - 0 is 0
opening time is 0 or 12 midnight
closing time is 0 or 12 midnight
so you get 0

If it ain't broke don't fix it
Discover my world at jkirkerx.com

Re: Javascript function error.

and180y12-Jun-20 9:33

and180y

12-Jun-20 9:33

I was just glad the code worked. Smile | :)

Re: Javascript function error.

jkirkerx12-Jun-20 9:47

jkirkerx

12-Jun-20 9:47

I wrote a similar function for showing that my business is open, based on open and closed hours in TypeScript.
It drove me nuts, was always off by an hour, Daylight savings.
I'll get back to it soon, now that I have more experience in TypeScript.

Frown | :(

setStoreHours(): void {
    const date = new Date();
    const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
    const offset = date.getTimezoneOffset() / 60;
    this.hourOfDay = date.getHours();
    this.dayOfWeek = date.getDay();
    switch (this.dayOfWeek) {
      case 0:
        // Sunday
        this.storeStatus = "Closed";
        break;
      case 1:
        // Monday
        if (this.hourOfDay > 8 && this.hourOfDay < 17) {
          this.storeStatus = "Open";
        }
        break;
      case 2:
        // Tuesday
        if (this.hourOfDay > 8 && this.hourOfDay < 17) {
          this.storeStatus = "Open";
        }
        break;
      case 3:
        // Wednesday
        if (this.hourOfDay > 8 && this.hourOfDay < 17) {
          this.storeStatus = "Open";
        }
        break;
      case 4:
        // Thursday
        if (this.hourOfDay > 8 && this.hourOfDay < 17) {
          this.storeStatus = "Open";
        }
        break;
      case 5:
        // Friday
        if (this.hourOfDay > 8 && this.hourOfDay < 15) {
          this.storeStatus = "Open";
        }
        break;
      case 6:
        // Saturday
        this.storeStatus = "Closed";
        break;
      default:
        this.storeStatus = "Closed";
    }
  }

If it ain't broke don't fix it
Discover my world at jkirkerx.com

Re: Javascript function error.

and180y12-Jun-20 11:48

and180y

12-Jun-20 11:48

Sorry, I think I deleted my reply just as you replied to it. Sigh | :sigh:

Re: Javascript function error.

jkirkerx12-Jun-20 12:11

jkirkerx

12-Jun-20 12:11

That's JQuery like syntax.
IMO, Don't waste your time learning JQuery, I've been there and done that already.
JQuery is obsolete now, because modern browsers support modern JavaScript.
JQuery adds 3 Lbs to your first page download, and is very heavy in weight, in exchange to write shorthand JavaScript.

The reason your not absorbing or moving faster with knowledge is because your looking at shorthand JavaScript/JQuery examples, and trying to understand and copy them. These are very advanced writing skills. You should start with entry level skill writing, and when you get that down, move to shorthand.

I would of wrote it like this, for a beginner example.
ES6

Use HTML to bind the event to the button, and run calcTime().
Use camel case to label things eg. calcTime vs CalcTime vs calc-time
let has replaced var
use const instead of var or let to when something that is constant.
Try not to make a lot of const, see how I did it in one line

ES6 Example

<button type="button" onBlur="calcTime()">Calculate</button>

function calcTime() {

  // Make references to input elements
  const time = document.getElementById("currentCharge"),
    current = document.getElementById("timeAllowed"),
    breakEven = document.getElementById("breakEven");

  // Get the element values, convert to number/float
  // By default, values are strings, and don't do math well.
  let t = parseFloat(time.value);
  let c = parseFloat(current.value);

  // Perform the equation
  let bE = t * c;

  // Output the equation
  breakEven.innerHTML = bE.toString();

}

JavaScript comes in many flavors now.
I think you want ECMAScript 6, ES6, ECMAScript 2015
From there, you can branch out to TypeScript, Node, etc.
I don't know of a good learning course, but you need to stick to one version in order to learn.
And when searching for help on the internet, find examples in ES6; learn to identity ES6 examples, and then code and test.

If it ain't broke don't fix it
Discover my world at jkirkerx.com

Re: Javascript function error.

jkirkerx12-Jun-20 11:17

jkirkerx

12-Jun-20 11:17

<button type="button" onBlur="calcTime()">Calculate</button>

function calcTime() {

  // Make references to input elements
  const time = document.getElementById("currentCharge"),
    current = document.getElementById("timeAllowed"),
    breakEven = document.getElementById("breakEven");

  // Get the element values, convert to number/float
  // By default, values are strings, and don't do math well.
  let t = parseFloat(time.value);
  let c = parseFloat(current.value);

  // Perform the equation
  let bE = t * c;

  // Output the equation
  breakEven.innerHTML = bE.toString();

}

If it ain't broke don't fix it
Discover my world at jkirkerx.com

Re: Javascript function error.

and180y13-Jun-20 6:57

and180y

13-Jun-20 6:57

Have added some more elements (not in use at present) but still not getting the breakeven to calculate.

HTML

<div class='col-sm-2 mb-1'>
          <input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
        </div>
    <div class='col-sm-2 mb-2'>
          <input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
        </div>
	<div class='col-sm-2 mb-2'>
          <input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
        </div>
	<div class='col-sm-2 mb-2'>
          <input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
        </div>
	<div class='col-sm-2 mb-2'>
          <input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
      	  </div>
		 </div>

JavaScript

<script>
	<button type="button" onBlur="calcTime()">Calculate</button>

function calcTime() {

  // Make references to input elements
  const time = document.getElementById("timeAllowed"),
    current = document.getElementById("currentCharge"),
    breakEven = document.getElementById("breakEven"),
    tier1 = document.getElementById ("tier1"),
	tier2= document.getElementById ("tier2");

  // Get the element values, convert to number/float
  // By default, values are strings, and don't do math well.
  let t = parseFloat(time.value);
  let c = parseFloat(current.value);

  // Perform the equation
  let bE = t * c;

  // Output the equation
  breakEven.innerHTML = bE.toString();

}

modified 13-Jun-20 12:43pm.

Re: Javascript function error.

Richard MacCutchan13-Jun-20 7:31

Richard MacCutchan

13-Jun-20 7:31

Look at the id names you are using in the HTML against the ones you are using in the Javascript. You need to read through your code more closely.

Re: Javascript function error.

and180y13-Jun-20 12:48

and180y

13-Jun-20 12:48

Thanks Richard, you were right. In my haste I lost focus. Smile | :)

Re: Javascript function error.

jkirkerx13-Jun-20 8:36

jkirkerx

13-Jun-20 8:36

You got it wrong ... You are fresh at this Wink | ;)

I can't test this at the moment, but it should work.
I hope it does.

<script>    

function calcTime() {

  // Make references to input elements
  const time = document.getElementById("time"),
    current = document.getElementById("current"),<br />
    tier1 = document.getElementById ("tier1"),
    tier2= document.getElementById ("tier2"),
    breakEven = document.getElementById("breakEven"),
    results = document.getElementById("results");

  // Get the element values, convert to number/float
  // By default, values are strings, and don't do math well.
  let t = parseFloat(time.value);
  let c = parseFloat(current.value);

  // Perform the equation
  let bE = t * c;

  // Output the equation to the span element, remove the comments below
  console.log("breakEven=", bE); // Diagnostics, hit F12 on your keyboard and select console
  results.innerHTML = bE.toString(); // innerHTML is for a span tag, value is textbox
}
</script>

<div class='col-sm-2 mb-1'>
  <input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
</div>
<div class='col-sm-2 mb-2'>
  <input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
  <input type='text' id='breakEven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
  <input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
  <input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
</div>
<div class="row col-12">
   <button type="button" onBlur="calcTime()">Calculate</button>
</div>
<div class="row col-12">
  <span id="results">0</span> 
</div>

If it ain't broke don't fix it
Discover my world at jkirkerx.com

Re: Javascript function error.

and180y13-Jun-20 12:47

and180y

13-Jun-20 12:47

Jkirkerx, not sure why but your post vanished. I tried it but no luck. Going to change a few things so will keep you updated, thanks for your help thus far. Smile | :)

JavaScript slide show works bad on the first page load

Hypnonis8-Jun-20 21:03

Hypnonis

8-Jun-20 21:03

Hello,

I'm having an issue with my javascript slider inside removals page.

You can check it out on www.poznanprzeprowadzki.pl (not a commercial :P), section "Galeria".

On the first load, the slideshow works but, the 3/4 of one image and 1/4 of second image is inside the slideshow-container. It is possible to slide through the gallery, but one click on the button isn't moving the image enough. After the refresh, inside the slideshow-container there is only one image, and it works fine sliding through gallery.

I included the script after the footer section. Hope someone can help me... Smile | :)

<script>
		const slideshowSlide = document.querySelector('.slideshow-slide');
		const slideshowImages = document.querySelectorAll('.slideshow-slide img');

		//Buttons

		const prevBtn = document.querySelector('#prevBtn');
		const nextBtn = document.querySelector('#nextBtn');

		//Counter
		let counter = 1;
		const size = slideshowImages[0].clientWidth;

		slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

		//Button Listeners

		nextBtn.addEventListener('click',function(){
			if (counter >= slideshowImages.length-1) return;
			slideshowSlide.style.transition = 'transform 0.4s ease-in-out';
			counter++;
			slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
		});

		prevBtn.addEventListener('click',function(){
			if (counter <= 0) return;
			slideshowSlide.style.transition = 'transform 0.4s ease-in-out';
			counter--;
			slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
		});

		slideshowSlide.addEventListener('transitionend', ()=>{
			if (slideshowImages[counter].id === 'lastclone') {
				slideshowSlide.style.transition = "none";
				counter = slideshowImages.length - 2;
				slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
			}
			if (slideshowImages[counter].id === 'firstclone') {
				slideshowSlide.style.transition = "none";
				counter = slideshowImages.length - counter;
				slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
			}
		});
	</script>

Re: JavaScript slide show works bad on the first page load

Richard Deeming8-Jun-20 23:30

Richard Deeming

8-Jun-20 23:30

Unless the <img> element has an explicit width set, you'll need to wait for the images to finish loading before you can measure them. On the first page load, your script is probably running before the images have finished loading. On subsequent page loads, the images are probably being loaded from the cache, and finish loading before you script runs.

There's a handy plugin for detecting when all images in a container have finished loading:
GitHub - desandro/imagesloaded: JavaScript is all like "You images done yet or what?"[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: JavaScript slide show works bad on the first page load

Hypnonis9-Jun-20 7:33

Hypnonis

9-Jun-20 7:33

Unfortunately it didn't help. I tried to set height and width of the images, tried to set the width of the images to 100% of the containers width and nothing helped.

I used both CDN scripts from your link.

I just realized that Mozilla Firefox is also displaying the slideshow bad. The images are way smaller and are all visible.

JSON object not showing values.. Can someone help

Member 35640766-Jun-20 5:33

Member 3564076

6-Jun-20 5:33

Code is here:-

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
  
{% csrf_token %}
    
<script>  

//Your string
    
let a = "{{models}}"    
a = a.replace(/"/g, '"');
a = a.replace(/(?:\r\n|\r|\n)/g, '');

let stringToParse = JSON.stringify(a);      
//document.body.innerHTML = `<p> Received String: ${stringToParse}</p>`;

//Converting your string to object
let convertedToObject = JSON.parse(stringToParse);
document.body.innerHTML = `<p> Received String: ${convertedToObject}</p>`;

//Getting the boardMembers list from your parsed object
let listBoardMembers = convertedToObject.boardMembers;
let listExecutives  =  convertedToObjects.executives;    

document.body.innerHTML = `<p> listboard: ${listBoardMembers}</p>`;
document.body.innerHTML = `<p>  listexecutives: ${listExecutives}</p>`;
   
    
//Creating Elements on HTML (creating a Paragraph with the received data and a container for the list of members). *Notice: I've created a "DIV" (container) with a unique ID ("listMembers"). This is important because when I start to iterate the members I will add them inside the container, and for that, I need to reference it using an ID.*

//document.body.innerHTML = `<p> Received String: ${convertedToObject}</p>`;
document.body.innerHTML += `<div id="listMembers"></div>`;

//Iterating the list of boardMembers using this length;
for (let i = 0; i < listBoardMembers.length; i++) {
  let member = listOfMembers[i];

  let memberName = member.name;
  let memberImageURL = '';

  // Verify if the user has thumbnail
  if (member.thumbnail !== null){
     memberImageURL = member.thumbnail.url;
  }

  //Adding this member to the member's container, using the container ID, that we created previously.

  document.getElementById('listMembers').innerHTML += `
     <div style="display: flex;">
       <img src="${memberImageURL}">
       <h1>${memberName}</h1>
     </div>
  `;
}
      
  </script>
</body>
</html>

JSON object is here:-

{"boardMembers": [{"id": "7394026", "name": "Stephen Joseph Squeri", "slug": "7394026-stephen-joseph-squeri", "companyName": "American Express Co", "company": {"id": "AXP:US", "name": "American Express Co"}, "webVisibility": true}, {"id": "3994082", "name": "Ronald A Williams "Ron"", "slug": "3994082-ronald-a-williams-"ron"", "companyName": null, "company": null, "webVisibility": false}, {"id": "1439479", "name": "Theodore J. Leonsis", "slug": "1439479-theodore-j-leonsis", "companyName": "Monumental Sports & Entertainment", "company": null, "webVisibility": true}, {"id": "1499616", "name": "John Joseph Brennan "Jack"", "slug": "1499616-john-joseph-brennan", "companyName": "Vanguard Charitable Endowment", "company": null, "webVisibility": true}, {"id": "1501790", "name": "Dr Daniel L Vasella "Dan"", "slug": "1501790-dr-daniel-l-vasella-"dan"", "companyName": null, "company": null, "webVisibility": false}, {"id": "1512919", "name": "Anne Lauvergeon", "slug": "1512919-anne-lauvergeon", "companyName": null, "company": null, "webVisibility": false}, {"id": "1529307", "name": "Peter F Chernin", "slug": "1529307-peter-f-chernin", "companyName": "Chernin Group LLC/ The", "company": null, "webVisibility": true}, {"id": "1720518", "name": "Rafael De La Vega "Ralph"", "slug": "1720518-rafael-de-la-vega", "companyName": "Forte Capital Management LLC", "company": {"id": "0778486D:US", "name": "Forte Capital Management LLC/GA"}, "webVisibility": true}, {"id": "1805754", "name": "Michael O Leavitt "Mike"", "slug": "1805754-michael-o-leavitt", "companyName": "Leavitt Partners", "company": {"id": "0707795D:US", "name": "Leavitt Partners LLC"}, "webVisibility": true}, {"id": "1879736", "name": "Christopher D Young "Chris"", "slug": "1879736-christopher-d-young", "companyName": "Mcafee Inc", "company": null, "webVisibility": true}, {"id": "14003646", "name": "Charlene Barshefsky", "slug": "14003646-charlene-barshefsky", "companyName": "Wilmer Cutler Pickering Hale and Dorr LLP", "company": {"id": "1221L:US", "name": "Wilmer Cutler Pickering Hale and Dorr LLP"}, "webVisibility": true}, {"id": "17579429", "name": "Karen L Parkhill", "slug": "17579429-karen-l-parkhill", "companyName": "Medtronic PLC", "company": {"id": "MDT:US", "name": "Medtronic PLC"}, "webVisibility": true}, {"id": "21421355", "name": "Lynn A Pike", "slug": "21421355-lynn-a-pike", "companyName": null, "company": null, "webVisibility": false}], "totalBoardMembers": 13, "executives": [{"id": "7394026", "name": "Stephen Joseph Squeri", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNnVt_wW9y_A/v3/80x80.jpg", "alt": null}, "title": "Chairman/CEO", "slug": "7394026-stephen-joseph-squeri", "webVisibility": true}, {"id": "20887787", "name": "Dr Mohammed Badi", "thumbnail": null, "title": "Chief Strategy Officer", "slug": "20887787-mohammed-badi", "webVisibility": true}, {"id": "18706279", "name": "Monique R Herena", "thumbnail": null, "title": "Chief Colleague Experience Officer", "slug": "18706279-monique-r-herena", "webVisibility": true}, {"id": "19676689", "name": "Elizabeth Rutledge", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iABmk_sWUnY4/v3/80x80.png", "alt": null}, "title": "Chief Marketing Officer", "slug": "19676689-elizabeth-rutledge", "webVisibility": true}, {"id": "18784925", "name": "Tangela Richter", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iKYkW0FlMRW4/v3/80x80.png", "alt": null}, "title": "Chief Governance Ofcr/Secy", "slug": "18784925-tangela-richter", "webVisibility": true}, {"id": "15024090", "name": "Laureen E Seeger", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iiw0z.pdTRbE/v1/80x80.jpg", "alt": "LAUREEN E SEEGER"}, "title": "Chief Legal Officer", "slug": "15024090-laureen-e-seeger", "webVisibility": true}, {"id": "21336581", "name": "Jennifer Skyler", "thumbnail": null, "title": "Chief Corporate Affairs Officer", "slug": "21336581-jennifer-skyler", "webVisibility": true}, {"id": "19676686", "name": "Raymond Joabar", "thumbnail": null, "title": "Pres:Global Risk/CRO", "slug": "19676686-raymond-joabar", "webVisibility": true}, {"id": "15365626", "name": "Douglas E Buckminster", "thumbnail": null, "title": "Group Pres:Global Consumer", "slug": "15365626-douglas-e-buckminster", "webVisibility": true}, {"id": "16654781", "name": "Anna Marrs", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNFzMiuYiRGY/v3/80x80.png", "alt": null}, "title": "Pres:Global Commercial Svcs", "slug": "16654781-anna-marrs", "webVisibility": true}, {"id": "16804630", "name": "Denise Pickett", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iReOY_ZB0dOI/v2/80x80.png", "alt": null}, "title": "Pres:Global Services Group", "slug": "16804630-denise-pickett", "webVisibility": true}, {"id": "6832356", "name": "Anre D Williams", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iJ5kSc7LL.3Y/v2/80x80.png", "alt": null}, "title": "Pres:Global Merchant & Network Svcs", "slug": "6832356-anre-d-williams", "webVisibility": true}, {"id": "3221610", "name": "Jeffrey C Campbell "Jeff"", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iV0fAS1rb10o/v1/80x80.jpg", "alt": "35000014"}, "title": "Exec VP/CFO", "slug": "3221610-jeffrey-c-campbell", "webVisibility": true}, {"id": "16733751", "name": "Marc D Gordon", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/isa0AVbtpBaM/v3/80x80.jpg", "alt": null}, "title": "Exec VP/CIO", "slug": "16733751-marc-d-gordon", "webVisibility": true}, {"id": "21531045", "name": "Jessica Lieberman Quinn", "thumbnail": null, "title": "Exec VP/Controller", "slug": "21531045-jessica-lieberman-quinn", "webVisibility": true}, {"id": "19863566", "name": "Alan P Gallo", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/i_G02QWHFys4/v3/80x80.jpg", "alt": null}, "title": "Exec VP:Internal Audit/Chief Audit Exec", "slug": "19863566-alan-p-gallo", "webVisibility": true}, {"id": "16310906", "name": "Vivian Zhou", "thumbnail": null, "title": "Senior VP/Head:Investor Relations", "slug": "16310906-vivian-zhou", "webVisibility": false}], "totalExecutives": 17}

Re: JSON object not showing values.. Can someone help

Richard MacCutchan7-Jun-20 1:50

Richard MacCutchan

7-Jun-20 1:50

I took another look at this and your JSON text has some badly formatted data round about character 278.

Pyramid array

Girardi.E30-May-20 1:48

Girardi.E

30-May-20 1:48

Hello everyone,

I'm new to Javascript and I'm trying to write a function that returns a pyramid shape inside an array. The problem is that I can't get it to display each element of the array on a different line.

Here is my code:

function pyramid(height){
var myPyramid = [];
var block ='#';
var space =' ';

for(let i = 0; i < height; i++){

myPyramid.push((space.repeat(height - i) + block.repeat((i * 2) + 1)));

}

return myPyramid;
}

let newPyramid = console.log(pyramid(5));

Any help will be much appreciated.

Re: Pyramid array

Richard MacCutchan30-May-20 2:15

Richard MacCutchan

30-May-20 2:15

You have a one dimensional array so it will print the entire array on a single line. You will need to create a 2D array, that is an array of arrays. Each inner array will contain the values for each line to be printed. Your print part will then need to be something like:

JavaScript

let newPyramid = pyramid(5);
for (i = 0; i < newPyramid.length; i++) {
  console.log(newPyramid[i]);
}

Re: Pyramid array

DerekT-P30-May-20 3:30

DerekT-P

30-May-20 3:30

As Richard says, you have a 1-dimensional array; but you're populating it with a string representation, and that's all fine.
console.log will display the contents in a single line, that's just how it works. But there's a "downarrow" link next to that single line; click it and the console will show each element on a separate line, illustrating the pyramid shape as you want it.

If you want the pyramid shown directly in the log without further user intervention, as Richard points out you'll need to use a loop to log each element separately (exactly as Richard has written it).

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.