Display values from array [duplicate]

Question

When the user clicks a button I want the below data to be displayed on my webpage in the following format:

car1 - id:1346 - type BMW

car2 - id: 1379 - type Holden

etc...

How exactly would I go about doing this? I tried this:

document.getElementById('message').innerHTML = car1

But all that was displayed was '[object Object]'

    var car1 = {id:"1346", type:"BMW"};
    var car2 = {id:"1379", type:"Holden"};
    var car3 = {id:"2580", type:"Ford"};
    var cararray = [car1, car2, car3];

You need to use JSON.stringify on an object to display it in text form. — dev8080
– dev8080, Commented Apr 25, 2017 at 11:04

kind user · Accepted Answer · 2017-04-25 11:19:32Z

0

I would suggest you using a bulleted list (ul) and just append elements from the cararray array.

var cararray = [{id:"1346",type:"BMW"},{id:"1379",type:"Holden"},{id:"2580",type:"Ford"}], 
    content = document.getElementById('message'),
    btn = document.getElementById('btn');

cararray.forEach(function(v,i) {
    var el = document.createElement('li');
    el.innerHTML = `car${i+1} - id: ${v.id} - type: ${v.type}`;
    content.appendChild(el);
});

btn.addEventListener('click', function() {
    content.style.display = 'block';
});

ul {
  list-style-type: none;
}

<button id='btn'>reveal list</button>
<ul id='message' hidden></ul>

edited Apr 25, 2017 at 11:19

answered Apr 25, 2017 at 11:09

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Comments

Toby Mellor · Accepted Answer · 2017-04-25 11:51:00Z

0

You can access information of the car by using .<property>, where <property> in this case is either .id or .type.

To get all of the cars, you need to loop through cararray, and on each loop add it to the message.

var car1 = {id:"1346", type:"BMW"};
var car2 = {id:"1379", type:"Holden"};
var car3 = {id:"2580", type:"Ford"};
var cararray = [car1, car2, car3];

var message = '';

for (var i = 0; i < cararray.length; i++) {
    var car = cararray[i];
    
    message += "car" + (i + 1) + " - id:" + car.id + " - type " + car.type + "\n";
}

alert(message);

alert(message) is used as an example, you can replace this with document.getElementById('message').innerHTML = message, and use <br /> instead of \n when appending a car to the message.

edited Apr 25, 2017 at 11:51

answered Apr 25, 2017 at 11:07

Toby Mellor

8,2078 gold badges38 silver badges58 bronze badges

5 Comments

Toby Mellor Over a year ago

Unsure why this got downvoted since OPs problem was displaying '[object Object]' when using "document.getElementById('message').innerHTML = car1". The car array wasn't part of the question

Cerbrus Over a year ago

1: Don't use jsfiddle if you can just use snippets. 2: you're ignoring the fact the OP has multiple cars he wants to render.

Toby Mellor Over a year ago

@Cerbrus Answer changed and feedback noted. Thanks

Cerbrus Over a year ago

Much better! Note that \n won't work if the OP wants to add this message to his HTML.

Toby Mellor Over a year ago

@Cerbrus Edited

Zakawa · Accepted Answer · 2017-04-25 11:08:16Z

-1

You have explicitly wright what variable you wan't to render, you can't transform an object to string. You can do this like this :

document.getElementById('message').innerHTML = "id:" + car1.id + " - type " + car1.type
//Return id:1346 - type BMW

or like this :

document.getElementById('message').innerHTML = JSON.stringify(car1)
//Return {"id":"1346","type":"BMW"}

answered Apr 25, 2017 at 11:08

Zakawa

1301 silver badge5 bronze badges

Comments

Weedoze · Accepted Answer · 2017-04-25 11:09:47Z

-1

You can use a loop to iterate your array and display what you need

var car1 = {
  id: "1346",
  type: "BMW"
};
var car2 = {
  id: "1379",
  type: "Holden"
};
var car3 = {
  id: "2580",
  type: "Ford"
};
var cararray = [car1, car2, car3];

function display() {
  let message = "";
  cararray.forEach((car,i)=>message += "car"+(i+1)+" - id:"+car.id+" - type "+car.type+"</br>");
  document.getElementById('message').innerHTML = message;
}

<button onclick="display()">Display</button>
<p id="message"></p>

answered Apr 25, 2017 at 11:09

Weedoze

14k2 gold badges38 silver badges65 bronze badges

Comments

Unknown_Coder · Accepted Answer · 2017-04-25 11:58:40Z

-1

    <html>
    <head>
    <script>
    function myFun()
    {
        var car1 = {id:"1346", type:"BMW"};
        var car2 = {id:"1379", type:"Holden"};
        var car3 = {id:"2580", type:"Ford"};
        var cararray = [car1, car2, car3];
        var cart="";
        for(var x=0; x<cararray.length; x++)
        {
          if(x==cararray.length)
            cart = cart + "car"+x+ "- id:"+cararray[x].id+" - type "+cararray[x].type;
          else
            cart = cart + "car"+x+ "- id:"+cararray[x].id+" - type "+cararray[x].type+ "<br>";
        }
        document.getElementById('message').innerHTML = cart;
    }
    </script>
    <head>
    <body onload="myFun()">
    <div id="message"></div>
    </body>
    </html>

Try this simple solution. hopefully, it will work for you!

edited Apr 25, 2017 at 11:58

answered Apr 25, 2017 at 11:21

Unknown_Coder

7726 silver badges24 bronze badges

14 Comments

Unknown_Coder Over a year ago

May i know reason for downvoting ?

Cerbrus Over a year ago

Divyesh: Imagine what this code would look like if you had 100 cars... Why aren't you using the cararray?

Unknown_Coder Over a year ago

This solution just for this particular question sir.

Unknown_Coder Over a year ago

i know looping concept but it might be complicated to understand for this kind of question

Toby Mellor Over a year ago

@Cerbrus OP didn't request that car array should be used. He gave an example, that wasn't working, and our solutions addressed the issue to this problem. Upvote for the correct solution

|

Collectives™ on Stack Overflow

Display values from array [duplicate]

5 Answers 5

Comments

5 Comments

Comments

Comments

14 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

Comments

14 Comments

Linked

Related