Can you choose a specific position in an array from a function?

Question

Not sure what to ask about this one exactly. But, the code I have is below. What I would like to do is use listPlanets(); in the if statement to return the array item that the user types into the prompt.

Any help would be nice.

var planets = [
    {planet: 'Mercury', position: '1', orbit_time: '0.24', nat_satellites: '0'},
    {planet: 'Venus', position: '2', orbit_time: '0.62', nat_satellites: '0'},
    {planet: 'Earth', position: '3', orbit_time: '1', nat_satellites: '1'},
    {planet: 'Mars', position: '4', orbit_time: '1.88', nat_satellites: '2'},
    {planet: 'Jupiter', position: '5', orbit_time: '11.86', nat_satellites: '67'},
    {planet: 'Saturn', position: '6', orbit_time: '29.46', nat_satellites: '62'},
    {planet: 'Uranus', position: '7', orbit_time: '84.32', nat_satellites: '27'},
    {planet: 'Neptune', position: '8', orbit_time: '164.79', nat_satellites: '14'}
];

var listPlanets = function () {
    for (var i = 0; i < planets.length; i++) {
        document.write(planets[i].planet + ' is planet #' + planets[i].position + 
            ' from the Sun. Time to complete its orbit is ' + planets[i].orbit_time + ' earth year(s). It has ' + planets[i].nat_satellites + ' natural satellite(s).<br>' );
    }
}

// listPlanets();

var num = window.prompt("Please enter a number between 1 and 8");

if (1 <= num && num <= 8) {
    listPlanets();
} else {
    alert("The value you entered is not within range. Please reload the page and enter a value thatis within 1 and 8, inclusive."); 
    window.location.reload();
}

Consider using DOM manipulation rather than `document.write`; you're playing with fire with that function. See [Why is document.write considered a “bad practice”?](https://stackoverflow.com/q/802854/215552) — Heretic Monkey, Oct 18 '18 at 14:58

score 2 · Accepted Answer · answered Oct 18 '18 at 15:06

@dgeare's answer works because the array indices match the position property values. You can also accomplish this by adding a simple if statement in your listPlanets function to check for a match from the function's parameter and the position property.

var planets = [
    {planet: 'Mercury', position: '1', orbit_time: '0.24', nat_satellites: '0'},
    {planet: 'Venus', position: '2', orbit_time: '0.62', nat_satellites: '0'},
    {planet: 'Earth', position: '3', orbit_time: '1', nat_satellites: '1'},
    {planet: 'Mars', position: '4', orbit_time: '1.88', nat_satellites: '2'},
    {planet: 'Jupiter', position: '5', orbit_time: '11.86', nat_satellites: '67'},
    {planet: 'Saturn', position: '6', orbit_time: '29.46', nat_satellites: '62'},
    {planet: 'Uranus', position: '7', orbit_time: '84.32', nat_satellites: '27'},
    {planet: 'Neptune', position: '8', orbit_time: '164.79', nat_satellites: '14'}
];

var listPlanets = function (userInput) {
   for (var i = 0; i < planets.length; i++) {
       if (planets[i].position == userInput) {
          document.write(planets[i].planet + ' is planet #' + planets[i].position + 
              ' from the Sun. Time to complete its orbit is ' + planets[i].orbit_time + ' earth year(s). It has ' + planets[i].nat_satellites + ' natural satellite(s).<br>' ); 
       }
   }
}

// listPlanets();

var num = window.prompt("Please enter a number between 1 and 8");

if (1 <= num && num <= 8) {
    listPlanets(num);
} else {
    alert("The value you entered is not within range. Please reload the page and enter a value thatis within 1 and 8, inclusive."); 
    window.location.reload();
}

@dgeare & brettinternet Thank you both, this was specifically for an intro masters course. Bretts answer worked for me because loops are required. The Stack Overflow community is way more helpful than a college TA. — brooksrelyt, Oct 19 '18 at 15:52

dgeare · Answer 2 · 2018-10-18T15:17:26.357

I think you mean to be passing the entered value into the listPlanets function as an argument?

var planets = [
    {planet: 'Mercury', position: '1', orbit_time: '0.24', nat_satellites: '0'},
    {planet: 'Venus', position: '2', orbit_time: '0.62', nat_satellites: '0'},
    {planet: 'Earth', position: '3', orbit_time: '1', nat_satellites: '1'},
    {planet: 'Mars', position: '4', orbit_time: '1.88', nat_satellites: '2'},
    {planet: 'Jupiter', position: '5', orbit_time: '11.86', nat_satellites: '67'},
    {planet: 'Saturn', position: '6', orbit_time: '29.46', nat_satellites: '62'},
    {planet: 'Uranus', position: '7', orbit_time: '84.32', nat_satellites: '27'},
    {planet: 'Neptune', position: '8', orbit_time: '164.79', nat_satellites: '14'}
];

var listPlanets = function (i) { //i is a parameter that will be passed into the function at the time it is called
   i -= 1;//the user entered a value between 1 and 8, but our array indexes are from 0 - 7. decrease input by one
   document.write(planets[i].planet + ' is planet #' + planets[i].position + 
            ' from the Sun. Time to complete its orbit is ' + planets[i].orbit_time + ' earth year(s). It has ' + planets[i].nat_satellites + ' natural satellite(s).<br>' );
    
}

// listPlanets();

var num = window.prompt("Please enter a number between 1 and 8");

if (1 <= num && num <= 8) {
    listPlanets(num); //pass num into listPlanets function as argument
} else {
    alert("The value you entered is not within range. Please reload the page and enter a value thatis within 1 and 8, inclusive."); 
    window.location.reload();
}

In the above code, I removed the loop because we already know the user's selection. There's no need to do the work of walking over every item in the array because we can access that item directly. Since arrays are 0 based in javascript, we need to account for that by reducing the user input by 1.

As pointed out in some of the comments, you might prefer to reflect your data to the DOM instead of document.write which will overwrite the existing page and is generally considered a bad practice. If you were to do this in the DOM instead, it could look something like this:

var planets = [
    {planet: 'Mercury', position: '1', orbit_time: '0.24', nat_satellites: '0'},
    {planet: 'Venus', position: '2', orbit_time: '0.62', nat_satellites: '0'},
    {planet: 'Earth', position: '3', orbit_time: '1', nat_satellites: '1'},
    {planet: 'Mars', position: '4', orbit_time: '1.88', nat_satellites: '2'},
    {planet: 'Jupiter', position: '5', orbit_time: '11.86', nat_satellites: '67'},
    {planet: 'Saturn', position: '6', orbit_time: '29.46', nat_satellites: '62'},
    {planet: 'Uranus', position: '7', orbit_time: '84.32', nat_satellites: '27'},
    {planet: 'Neptune', position: '8', orbit_time: '164.79', nat_satellites: '14'}
];

var listPlanets = function (i) {
   i -= 1;
   document.getElementById('planet_name').innerHTML = planets[i].planet;
   document.getElementById('planet_info').innerHTML = planets[i].planet + ' is planet #' + planets[i].position + 
            ' from the Sun. Time to complete its orbit is ' + planets[i].orbit_time + ' earth year(s). It has ' + planets[i].nat_satellites + ' natural satellite(s).<br>';
    
}

// listPlanets();


document.getElementById('info_button').addEventListener('click', function(evt){
  var num = document.getElementById('planet_input').value;
  if (1 <= num && num <= 8) {
      listPlanets(num);
  } else {
      alert("The value you entered is not within range. Please reload the page and enter a value thatis within 1 and 8, inclusive."); 

  }
});

Pick a planet between 1 and 8 <input id='planet_input' type='number' /><button id='info_button'>View Info</button>
<h1 id='planet_name'></h1>
<h3 id='planet_info'></h3>

You may want to explain what your code does, especially the `i -= 1` line; it's not clear how much the OP understands array indexing... — Heretic Monkey, Oct 18 '18 at 15:01
@HereticMonkey that's fair. I'll expand it a bit. thank you. — dgeare, Oct 18 '18 at 15:10

score 0 · Answer 3 · answered Oct 18 '18 at 15:08

You should pass the index entered in the prompt as a function argument and use it to get the given item in the array:

var planets = [...];

var listPlanets = function (num) {
    var planet = planets[num];

    var thingToWrite = planet.planet + ' is planet #' + planet.position + ' from the Sun. Time to complete its orbit is ' + planet.orbit_time ' +  earth year(s). It has ' + planet.nat_satellites + ' natural satellite(s).<br>'

    document.write(thingToWrite);      
}

var num = window.prompt("Please enter a number between 1 and 8");

if (1 <= num && num <= 8) {
    listPlanets(num);
} else {
    alert("The value you entered is not within range. Please reload the page and enter a value thatis within 1 and 8, inclusive."); 
    window.location.reload();
}

Best Regards, Ivo

Can you choose a specific position in an array from a function?

3 Answers3