How do I populate a HTML listbox using json data

Question

0.00/5 (No votes)

See more:

I have a web service which has been built to pass Json data. I can verify that the data is being passed and is in the Json format. I have a JavaScript AJAX call which is to connect to the web service and retrieve the data. I can see that this works because I have an alert which shows me the Json data. My dilemma is that I have seen a number of different ways to populate a listbox but having tried a few of them I have not been able to get them to work with my data. I am stumped.

What I have tried:

My Json data:

{  "Batches": [    {      "ID": 1,      "product": "123117C"    },    {      "ID": 2,      "product": "123116B"    },    {      "ID": 3,      "product": "123116A"    },    {      "ID": 4,      "product": "123017B"    },    {      "ID": 5,      "product": "123016D"    },    {      "ID": 6,      "product": "122917A"    },    {      "ID": 7,      "product": "122916C"    },    {      "ID": 8,      "product": "122817D"    },    {      "ID": 9,      "product": "122817C"    },    {      "ID": 10,      "product": "122816B"    }  ],  "Table1": [    {      "id": 0,      "item": "item 0"    },    {      "id": 1,      "item": "item 1"    }  ]}

The HTML code where the listbox resides:

<div class="col-lg-12">
  <select path="lstObjects" id="lstObjects" name="BatchID">
 
  </select>
</div>

My Javascript which is to be populating the listbox upon document load:

function GetBatchData() {
   		
   		$.ajax({
   			type: 'GET',
   			url: 'http://192.168.1.103/Web%20Service/Service.asmx/GetBatchData',
   			dataType: 'json',
   			contentType: 'application/json;charset=utf-8',
   			success: function(product) {
   				var products = JSON.parse(product.d);
//    				var names = product.d;
//    				alert(product);
				$.each(products, function(index, value) {
        		$('#lstObjects').append($('<option>').text(value).val(index));
    			});
					
            },
   			failure: function(error) {
   				 alert(error.d); 
   			}
   		});
   };

Right now this Javascript does not have an attempt to populate the listbox. The closest I got to doing that took all the records from the Json call and paste them into one line in the listbox. My ultimate goal with this project is to allow the user to select a listbox item and that item would be associated with a variable in the Javascript to update a plot function I have.

Posted 13-Jun-18 11:02am

User 7923865

Updated 14-Jun-18 5:14am

v3

Add a Solution

Comments

j snooze 13-Jun-18 17:18pm

try a JSON.parse() on your results(i.e. var products = JSON.parse(product), that should set the "products" to an array of returned objects, then you can just loop through and append items to your list box. You might be able to get away with just using an each and looping through this link may help some. https://stackoverflow.com/questions/21007304/populate-listbox-options-with-result-of-an-ajax-call-using-query-in-spring-mvc-e

[no name] 13-Jun-18 17:46pm

I tried the suggestion from J Snooze and I get an error in JSON.parse: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data. If I remove the variable assignment for products and assign the variable product to the each loop I get one record in the listbox, but it contains all of the JSON elements.

F-ES Sitecore 14-Jun-18 5:27am

It's "product.d" you need to do the JSON.parse on, not "product"

F-ES Sitecore 14-Jun-18 10:09am

Update the question to include the code that is updating the listbox. We can't tell you what is wrong with code we can't see.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Accepted Answer · 2018-06-14T05:16:00

If you look at your JSON it has two properties, Batches and Table1. When you loop through the json you are looping through those two properties. When you then do "text(value)" on the Batches property how does javascript represent that as text? It can't, so it uses the type info instead which is where your [object Object] comes from, it then does the same thing for Table1.

What you probably actually want to do is loop through the list of products in the Batches property and use the ID of each property as the value and the product property as the text, but nowhere in your code are you doing any of this.

So first you want to loop through the Batches

$.each(products.Batches, function(index, value) {

Next when creating the option you want to use the ID and product values

$('#lstObjects').append($('<option>').text(value.product).val(value.ID));