How to access another array that is inside an array

Question

Hi guys I wonder how can I display the data of "products" that is inside an array please see my code below

JSON Array

var places = [
{"country_name": "Denmark", "latitude": 56, "longitude": 10, "status": "OK", "site_name": "Denmark", "serial_number": "12345", "products":["1","2"]},
{"country_name": "Japan", "latitude": 56, "longitude": 10, "status": "OK", "site_name": "Norway", "serial_number": "12345", "products":["3","4"]},
{"country_name": "Denmark", "latitude": 56, "longitude": 10, "status": "OK", "site_name": "USA", "serial_number": "12345", "products":["7","6"]}]

Javascript

function displayData(e)
{
var html = '';
var mapDiv = document.getElementById('mapContainer'), i = 0,
    dataIndex, tooltipDiv, key,
    mapMarkers = $(mapDiv).find('.e-mapMarker'), index = 0;
var collection = [];

for (i = 0; i < mapMarkers.length; i++) {

    if (e.target.parentNode.parentNode == mapMarkers[i]) {
        index = i;

    }
}

html += '<div id="infocontainer" class="map_element">';
html += '<div class="p-image"></div>';
html += '<div class="popupdetail">';
html += '<div class="p-name"> Site Name: ' + places[index].site_name + '</div>';
html += '<div class="p-name"> Site Status: ' + places[index].status + '</div>';
html += '<div class="p-name"> Country: ' + places[index].country_name + '</div>';
html += '</div>';
html += '</div>';


if (!document.getElementById('map_tooltip'))
{
    tooltipdiv = $("<div></div>").attr('id', "map_tooltip");
    $(document.body).append(tooltipdiv);
    $(tooltipdiv).css({
        "display": "none", "padding": "5px",
        "position": "absolute",
        "z-index": "13000",
        "cursor": "default",
        "font-family": "Segoe UI",
        "color": "#707070",
        "font-size": "12px", "pointer-events": "none",
        "background-color": "#FFFFFF",
        "border": "1px solid #707070"
    });
}
else
   {
    tooltipdiv = $("#map_tooltip");
    $(tooltipdiv).css({
        "left": (e.pageX + 5),
        "top": (e.pageY + 5)
    });
    $(tooltipdiv).html(html).show("slow");
   }
 }

so I want to render the "1","2" that is inside products or if I have multiple countries in array and I want to render a specific product array of a country so I hope I wont get any down vote for not clear english or explanations :-)

See [Access / process (nested) objects, arrays or JSON](https://stackoverflow.com/q/11922383/218196) — Felix Kling, Nov 07 '17 at 06:44
Have you tried places[index].products[0] and places[index].products[1] ? — Nkole Evans, Nov 07 '17 at 06:45

Mamun · Accepted Answer · 2017-11-07T07:15:33.120

1

You can loop through the array like:

var places = [
{"country_name": "Denmark", "latitude": 56, "longitude": 10, "status": "OK", "site_name": "Denmark", "serial_number": "12345", "products":["1","2"]},
{"country_name": "France", "latitude": 5644, "longitude": 1044, "status": "OK", "site_name": "France", "serial_number": "125", "products":["3","4"]}]

places.forEach(function(item, index){
  if(item.country_name == "Denmark"){
    if(item.products){
      item.products.forEach(function(val){
        console.log(val);
      });
    }
  }
});

edited Nov 07 '17 at 07:15

answered Nov 07 '17 at 06:49

Mamun

66,969
9
47
59

may I ask another question to you? what if I have two countries in the Array (Denmark and France for example) and I want to display only products of Denmark should I replace forEach by using for loop in order to display the products under Denmark? sorry I very new to this array thing – Kyle Nov 07 '17 at 07:10
Then you need to check the country name like `if(item.country_name=='Denmark'){..` – Mamun Nov 07 '17 at 07:13
@Kyle, I did the changes in the snippet. Please have look. – Mamun Nov 07 '17 at 07:16
ok it works but hate to say that my boss ask me what if I have countries A-Z should I write that if statement equivalent to the numbers of countries in my JSON array – Kyle Nov 07 '17 at 07:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158380/discussion-between-kyle-and-mamun). – Kyle Nov 07 '17 at 07:36
what should I change from your code if I have more than two countries and I want to render/display a specific product array of a country? :-) – Kyle Nov 07 '17 at 08:24
That is what the current code is doing. If you want the product of a specific country you have to check the country else if you want to show all the product form all country just remove the condition. – Mamun Nov 07 '17 at 08:31

score 0 · Answer 2 · edited Nov 07 '17 at 07:29

0

places[0].products[0] to get value "1"
places[0].products[1] to get value "2"

places[0].products.join(',') to join the two values delimited by comma (,)

edited Nov 07 '17 at 07:29

Werner

2,126
2
22
34

answered Nov 07 '17 at 06:52

Shashith Darshana

2,715
1
25
27

Luke King · Answer 3 · 2017-11-07T08:00:16.517

0

A simpler loop through it seems to me.

var places = [
    {"country_name": "Denmark", "latitude": 56, "longitude": 10, "status": 
     "OK", "site_name": "Denmark", "serial_number": "12345", "products":
     ["1","2"]},
    {"country_name": "Denmark", "latitude": 56, "longitude": 10, "status": 
     "OK", "site_name": "Denmark", "serial_number": "12345", "products":
     ["1","2"]}
    ]
for(var j = 0;j<places.length;j++){
   if(places[j].products){
    var plcs = places[j].products
    for(var i = 0;i < plcs.length;i++){
    console.log(plcs[i]);
     }
   }
 }

edited Nov 07 '17 at 08:00

answered Nov 07 '17 at 07:42

Luke King

1
3

will this work if it happens I have more than two countries? – Kyle Nov 07 '17 at 07:43
I mean if I want to display products of a particular country and I have more than two countries? – Kyle Nov 07 '17 at 07:44
Changed for multiple locations. Used same country data for both. Simpler? you decide. – Luke King Nov 07 '17 at 08:01

score -1 · Answer 4 · answered Nov 07 '17 at 06:47

-1

Try this

places[index].products.join(',')

Hope this is what you need.

answered Nov 07 '17 at 06:47

user2427829

128
1
7

How to access another array that is inside an array

4 Answers4