How can i access a Value in an Array with jQuery

Question

How is it possible to access the values inside an array? i have already checked the jQuery documentation but my scenario isn't listed.

Array Structure:

var myData = [{
    label: "erster",
    id: 0,
    Name: "Ein Name"
}, {
    label: "zweiter",
    id: 1,
    Name: "Der zweite Name"
}, {
    label: "dritter",
    id: 2,
    Name: "Dritter Name"
}];

And here is my try to show up some results in the browser:

$(document).ready(function() {
    $.each(myData, function (i, val) {
        alert(i + " " + val);
    });
});

The Response is no value just Object,Object. I think I understand the structure of $.each a little bit (thanks to the documentation) but I see no way to go inside one of this array's elements.

Thanks for any help.

EDIT:

#

Ok thanks a lot for those very good and clear inputs. Now i understand how to access the values. Can someone offer me a trick how to create an HTML Output for those Elements?

Result should be something like:

<div id="accordion">
  <h3>'val.labelfromelement1'</h3>
  <div class="notimportant">'val.Namefromelement1'</div>
  <h3>'val.labelfromelement2'</h3>
  <div class="notimportant">'val.Namefromelement2'</div>
  <h3>'val.labelfromelement3'</h3>
  <div class="notimportant">'val.Namefromelement3'</div>
  <h3>'val.labelfromelement4'</h3>
  <div class="notimportant">'val.Namefromelement4'</div>
</div>

as you can see, it should result in an accordion that will be automatic increase if a we create a new element in the array (The Array is from a chart)

With the following Code it shows me just the last instance / Part / Segment / what ever :-)

var myData = [
			{
				label: "erster",
				id: 0,
				Name:"Ein Name"
				
				},
			{
				label: "zweiter",
				id: 1,
				Name:"Der zweite Name"
				
				},
			{
				label: "dritter",
				id: 2,
				Name:"Dritter Name"
				
				}
		
		]


$(document).ready(function(e) {
			$.each(myData, function (i, val) {
				myAccordion = "<h3>" + val.label + "</h3><div>" + val.Name + "</div>";
			});
			$("#myAccordionDiv").html(myAccordion);
		
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="myAccordionDiv">

</div>
</body>

deep breathing :-) what can i do now?

try this jsfiddle.net/kishoresahas/01mv34ra

Kishore Sahasranaman
– Kishore Sahasranaman

2015-11-11 14:07:43 +00:00
Commented Nov 11, 2015 at 14:07 — Kishore Sahasranaman
– Kishore Sahasranaman, Commented Nov 11, 2015 at 14:07

Rory McCrossan · Accepted Answer · 2015-11-11 14:08:42Z

2

Your $.each code is fine, the issue is because you're trying to append a string to an object results in type coercion to a string, hence the objects in the array are converted to [Object object].

Firstly, don't append the object as a string, and secondly use the console for debugging instead (To see the console, it's normally F12 in your browser).

$(document).ready(function() {
    $.each(myData, function (i, val) {
        console.log(i, val);
    });
});

Working example

Note that to get the properties of each object within the array, you can access them from the val parameter in your each() loop:

$.each(myData, function (i, val) {
    console.log(val.label);
    console.log(val.id);
    console.log(val.Name);
});

answered Nov 11, 2015 at 14:08

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

2 Comments

Marco Over a year ago

Nice thanks Rory ;)can you please have a look to my edited Question? I have to create via jquery a div construct for the array... But it creates just the last group thx for help

Rory McCrossan Over a year ago

No problem, glad to help. Re. the edit - I would start a new question for that.

Drewber81 · Accepted Answer · 2015-11-11 14:09:16Z

0

Basically you loop through your data, each datum becomes val, so then you have to access val's properties.

$.each(myData, function (i, val) {
    console.log(val.label);
    console.log(val.id);
    console.log(val.Name);
}

answered Nov 11, 2015 at 14:09

Drewber81

251 silver badge11 bronze badges

Comments

David P. · Accepted Answer · 2015-11-11 14:10:20Z

0

Object object is the string conversion of an object in js. You can call console.dir to see the whole object in the console. Try to access the single properties of your object with val.id for example.

answered Nov 11, 2015 at 14:10

David P.

3701 silver badge13 bronze badges

Comments

sideroxylon · Accepted Answer · 2015-11-11 14:11:20Z

You need to access the property of each value:

$(document).ready(function() {
  
  var myData = [
			{
				label: "erster",
				id: 0,
				Name:"Ein Name"
				
				},
			{
				label: "zweiter",
				id: 1,
				Name:"Der zweite Name"
				
				},
			{
				label: "dritter",
				id: 2,
				Name:"Dritter Name"
				
				}
		
		];

  
			$.each(myData, function (i ,val) {
    			console.log(i + ',' + val.label + ', ' + val.id + ',' + val.Name);
			});
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

coding lion · Accepted Answer · 2015-11-11 14:13:04Z

0

Your code is correct, the only issue is that val is an object. You have to access a property of your val, like val.label.

$(document).ready(function() {
        $.each(myData, function (i ,val) {
            alert( i + " " + val.label );
        });
});

answered Nov 11, 2015 at 14:13

coding lion

513 bronze badges

Comments

Luca Giardina · Accepted Answer · 2015-11-11 14:14:31Z

0

$(document).ready(function() {
        $.each(myData, function (i ,val) {
            //You are now inside the first object. 
            //Your first object have 3 element so loop inside it.
            $.each(val, function(j, element){
                alert(j + ' ' + element);
            }
            alert( i + " " + val );
            //etc..
        });
});

answered Nov 11, 2015 at 14:14

Luca Giardina

5184 silver badges14 bronze badges

Comments

Arthur Tsidkilov · Accepted Answer · 2015-11-11 14:54:13Z

you don't need to call or to know each property of your objects in array, only inner array loop, do also loop object of current cell

$(document).ready(function() {

  var myData = [ {
      label: "erster",
      id: 0,
      Name:"Ein Name" }, 
   {
      label: "zweiter",
      id: 1,
      Name:"Der zweite Name"

    },
    {
      label: "dritter",
      id: 2,
      Name:"Dritter Name"

    } ];

  $.each(myData, function (i ,val) {
    var tmpString = '';
    $.each(val, function(key, value) {
      tmpString += key + ' : ' + value + '\n';
    });
    alert(tmpString);
  });
});

working example https://jsfiddle.net/xxL5nhee/

Collectives™ on Stack Overflow

How can i access a Value in an Array with jQuery

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Related