asked on

Looping JSON data

Dear Experts,

I have the following javascript which does not work properly

objJSON = eval('('+ results +')');

for(var i = 0, e = objJSON.selectbox1.length; i < e; ++i) {
var option = new Option(objJSON.selectbox1[i].value, objJSON.selectbox1[i].text);
document.getElementById('selItemType').options[i] = option;
}

It should be populating my html select control, but it just fills it up with "undefined" values.

The json data looks like this

{
"textbox1" : "value1",
"textbox2" : "value2",
"selectbox1" : [
{ "value" : "1", "text" : "one" },
{ "value" : "2", "text" : "two" },
{ "value" : "3", "text" : "three" }
]
}

So basically, I want to use the selectbox1 part to loop through the arrays and populate the select box.

Please help

Morcalavin

This is a duplicate question. You already have this question open here: https://www.experts-exchange.com/questions/24517811/Populate-HTML-select-with-JSON-data.html

Please close one or the other.

narmi2

ASKER

This is a different problem, the problem there was that the loop would not loop which i have not fixed, however, this question the loop will loop, but fills the select box will undefined values.

Morcalavin

The below works fine for me. Where is 'results' variable coming from? Is it from an ajax request?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body>
<select id="names"><option>Default option if JS is disabled</option></select>
<script type="text/javascript">
 
var mySelectBox = document.getElementById('names');
mySelectBox.options.length = 0;
var myData = {"textbox1" : "value1","textbox2" : "value2","selectbox1" : [{ "value" : "1", "text" : "one" },{ "value" : "2", "text" : "two" },{ "value" : "3", "text" : "three" }]}; //this only needs to be eval'ed if it's a string
for(var i = 0, e = myData.selectbox1.length; i < e; ++i) {
    var option = new Option(myData.selectbox1[i].value, myData.selectbox1[i].text);
    mySelectBox.options[i] = option;
}
</script>
</body>
</html>

Open in new window

narmi2

ASKER

Yes, the "results" in

objJSON = eval('('+ results +')');

is from an AJAX request which has the value

{
"textbox1" : "value1",
"textbox2" : "value2",
"selectbox1" : [
{ "value" : "1", "text" : "one" },
{ "value" : "2", "text" : "two" },
{ "value" : "3", "text" : "three" }
]
}

So when I eval it and try to loop it into a select box, it gives me lots of undefined values.

Morcalavin

Does the ajax data contain those line returns? If so, you may need to remove the new line characters(start with \n). I think all the code is working fine. I think your JSON isn't formatted right and it is being eval'd improperly.

Look here:
http://stackoverflow.com/questions/395379/problem-when-retrieving-text-in-json-format-containing-line-breaks-with-jquery

ASKER CERTIFIED SOLUTION

Morcalavin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Badotz

For all things JSON, visit http://www.json.org