We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Looping JSON data

narmi2
narmi2 asked
on
Medium Priority
572 Views
Last Modified: 2013-11-08
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
Comment
Watch Question

This is a duplicate question.  You already have this question open here: https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/JSON/Q_24517811.html

Please close one or the other.

Author

Commented:
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.
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

Author

Commented:
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.
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
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Top Expert 2007

Commented:
For all things JSON, visit http://www.json.org
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.