How can i get the values from array

Question

I am storing multiple values in one array like:

var locations = [
    'Bhopal','Mobile',new google.maps.LatLng(18.40,78.81),'images/mobile.png',
    'Bangalore','Television',new google.maps.LatLng(18.30,83.90),'images/television.png',
    'Hyderabad','Footwear',new google.maps.LatLng(22.95,88.42),'images/footwear.png',
    'Kolkata','Kitchen',new google.maps.LatLng(22.58,88.33),'images/kitchen.png',
    'Mumbai','Furniture',new google.maps.LatLng(26.16,85.88),'images/furniture.png'
];

here i am getting the new latlng values in here

function drop() {
  clearMarkers();
  for (var i = 0; i < locations.length; i++) {
    addMarkerWithTimeout(locations[i], i * 200);
  }
}

Thing what i need is, the drop function is getting the LatLng from array,also i need to get the first 2 values like 'bhopal' and 'mobile' also and alert it. how can i get that?

Answer 1

If you intend to keep your data as formatted in your question, then it may be advisable to create a function for accessing records based on each record is 4 values long, this way you can use it again and again.

Here is an example of what I am talking about

Number.MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1;

function getRecord(data, recNum) {
  var length;

  if (!Array.isArray(data)) {
    throw new Error('data is not an Array');
  }

  length = data.length;
  if (length < 4 || length % 4 !== 0) {
    throw new Error('data is empty or record length is incorrect');
  }

  if (typeof recNum !== 'number' || recNum < 0 || recNum > Math.floor(Number.MAX_SAFE_INTEGER / 4)) {
    throw new Error('recNum is out of range or not a valid number');
  }

  return data.slice(recNum, recNum + 4);
}

var pre = document.getElementById('out'),
  locations = [
    'Bhopal', 'Mobile', {
      lat: 0,
      lng: 0
    }, 'images/mobile.png',
    'Bangalore', 'Television', {
      lat: 0,
      lng: 0
    }, 'images/television.png',
    'Hyderabad', 'Footwear', {
      lat: 0,
      lng: 0
    }, 'images/footwear.png',
    'Kolkata', 'Kitchen', {
      lat: 0,
      lng: 0
    }, 'images/kitchen.png',
    'Mumbai', 'Furniture', {
      lat: 0,
      lng: 0
    }, 'images/furniture.png'
  ],
  length = Math.floor(locations.length / 4),
  index;

for (index = 0; index < length; index += 1) {
  pre.textContent += JSON.stringify(getRecord(locations, index), null, 2) + '\n\n';
}

<pre id="out"></pre>

So calling getRecord(locations, 0) will return an array of length 4 and the following data

[
  "Bhopal",
  "Mobile",
  {
    "lat": 0,
    "lng": 0
  },
  "images/mobile.png"
]

Now you can access this array, where

index [0] is Bhopal and

index [3] is images/mobile.png

The alternative to to rearrange (either at source or a one time conversion) the data into a structure that is more fitting to your need.

Structures that may be more suitable are

Array of Arrays

[
    [...data0],
    [...dataN]
]

Array of Objects

[
    {...data0},
    {...dataN}
]

Answer 2

Try:

var locations = [
    ['Bhopal','Mobile',new google.maps.LatLng(18.40,78.81),'images/mobile.png'],
    ['Bangalore','Television',new google.maps.LatLng(18.30,83.90),'images/television.png'],
    ['Hyderabad','Footwear',new google.maps.LatLng(22.95,88.42),'images/footwear.png'],
    ['Kolkata','Kitchen',new google.maps.LatLng(22.58,88.33),'images/kitchen.png'],
    ['Mumbai','Furniture',new google.maps.LatLng(26.16,85.88),'images/furniture.png']
];


function drop() {
  clearMarkers();
  for (var i = 0; i < locations.length; i++) {
    addMarkerWithTimeout(locations[i][2], i * 200);
  }
}

Answer 3

Why don't you create your array like this :

var locations = [
    {Place : 'Bhopal', Thing : 'Mobile', Location : new google.maps.LatLng(18.40,78.81), Image : 'images/mobile.png'},
    {Place : 'Bangalore',Thing : 'Television',Location : new google.maps.LatLng(18.30,83.90),Image : 'images/television.png'},
    {Place : 'Hyderabad',Thing : 'Footwear',Location : new google.maps.LatLng(22.95,88.42),Image : 'images/footwear.png'}];

It's easier to manage it in this manner.

Answer 4

First of all your data structure does not seem to fit for the purpose you want it to.

You need an associative array, instead of a plain array.

A rough example:

var locations = [
    {"city":"Bhopal","type":"Mobile","latitude":123491283},
    {"city":"Paris","type":"SomethingElse","latitude":2342342},
    {"city":"Milano","type":"Landline","latitude":56456545}
]

Basically, 'objects' within an array.

Now you can access it like this:

 for (var i = 0; i < locations.length; i++) {
     var city = locations[i].city;
     var city = locations[i].type;
     var latitude = locations[i].latitude;
 }

Not what you asked for but hey..

Answer 5

As I can see, you keep your data in weird representation. Better keep it in this format:

var locations = [
    {location: 'Bhopal', type: 'Mobile', latlng: new google.maps.LatLng(18.40,78.81), iamge: 'images/mobile.png'},
    {location: 'Bhopal', type: 'Mobile', latlng: new google.maps.LatLng(18.40,78.81), iamge: 'images/mobile.png'},
    {location: 'Bhopal', type: 'Mobile', latlng: new google.maps.LatLng(18.40,78.81), iamge: 'images/mobile.png'},
    {location: 'Bhopal', type: 'Mobile', latlng: new google.maps.LatLng(18.40,78.81), iamge: 'images/mobile.png'},
];

But, if you want keep your format (or you can't modify it), you can do something like this:

for (var i = 0; i < locations.length; i+=4) {
     alert(locations[i]);
     alert(locations[i+1]);
 }

Answer 6

This is how the first row will be processed.

 for (var i = 0; i < locations.length; i=i+4) {
     locations[i] has 'Bhopal'
     locations[i+1] has 'Mobile'
     locations[i+2] has the object
     locations[i+3] has 'images/mobile.png'
 }

use them accordingly in your code.

Answer 7

function drop() {
  clearMarkers();
  for (var i = 0; i < locations.length / 4; i++) {
    // locations[2 + 4*i]  = latlng value  google.maps, ....
    // locations[4*i]  =  first column, Bhopal, Bangalore, ...
    // locations[1+4*i] = second column, Mobile, Television, ...
    // locations[3+4*i] = last column image
  }
}