How to list objects in a JSON file in html select options using only javascript?

Question

Firstly, my javascript knowledge is very very low and I'm struggling quite a bit hence the question. I understand there have been many similar questions, but what I need is for it to only use very basic javascript. So far I have:

JSON File:

var list=
    [
      {"title":"ObjectA",...
      },
      {"title":"ObjectB",...
      }
    ]

I've managed to list them using:

function objects() {
                for (a=0; a<list.length; a++) {
                    document.write(list[a].title);
                }
            }

However that puts all objects in one line. I know you can list them individually using something like:

function object0() {
                document.write(list[0].title)
            }

What I'm wondering is it is possible to list them using a for loop or something simple like that? Thanks in advance for any help.

Mati · Accepted Answer · 2016-12-08 22:40:14Z

1

Try this:

const pre = document.createElement("pre");
pre.innerHTML = JSON.stringify(list, null, 2);
document.body.appendChild(pre);

or print it to the console

console.log(JSON.stringify(list, null, 2));

Working example:

const list = [
  { 'title': 'ObjectA' },
  { 'title': 'ObjectB', foo: { ble: 123 } }
]

const pre = document.createElement('pre');
pre.innerHTML = JSON.stringify(list, null, 2);
document.body.appendChild(pre);

<body>
</body>

answered Dec 8, 2016 at 22:40

Mati

1,1481 gold badge12 silver badges27 bronze badges

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

Comments

num8er · Accepted Answer · 2016-12-08 22:45:26Z

1

Simple!

var list=
    [
      {"title":"ObjectA"},
      {"title":"ObjectB"},
      {"title":"ObjectC"},
      {"title":"ObjectD"},
      {"title":"ObjectE"},
      {"title":"ObjectF"}
    ];

document.write('<select name="item">');
list.map(function(item) {
  document.write('<option>'+item.title+'</option>');
});
document.write('</select>');

edited Dec 8, 2016 at 22:45

answered Dec 8, 2016 at 22:38

num8er

19.5k4 gold badges50 silver badges61 bronze badges

2 Comments

Nick Grealy Over a year ago

select / option - not ul / li ?

num8er Over a year ago

@NickGrealy did not saw the title (:

Collectives™ on Stack Overflow

How to list objects in a JSON file in html select options using only javascript?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related