I need to display my json results dynamically in html form i have this code but cannot see any data in my html page

Question

0.00/5 (No votes)

See more:

JavaScript

function GetProductDetails(barcodeId,coords) 
{
    $.getJSON("api/products/?barcodeId=" + barcodeId  + "&latitude=" + coords.latitude + "&longitude=" + coords.longitude)
      .done(function (data) {
         
          console.log(data);
          if (data.results == null) {

              $('#result').append(data.message)
          }

          else
          {
              var ul = $("<ul></ul>");
              ul.append(data.results.retailername);
              ul.append(data.results.productname);
              ul.append(data.results.price);
              ul.append(data.results.distance)
          }        
      });
}

Posted 11-Dec-13 1:48am

klein_jnr

Updated 11-Dec-13 2:34am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v3

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 11-Dec-13 8:35am

Do you see your data on Console?

klein_jnr 12-Dec-13 2:07am

Thank you Tadit no i dont see my data on my console and i would also like to know how i would iterate or go through each object while using the code that you showed me because my data result object is an array of 2 using something like $.each(data, function (key, item) and i only see undefined appearing on my html page as my list,Thank you for your help

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-13 2:18am

Do something like below...

$.each( data.items, function( i, item ) {
// Here try to get the data from "item". Check by putting debugger.
});

klein_jnr 12-Dec-13 3:51am

Thank you so much Talip, i managed to display everything the way you told me to go about like this. Product Details
Thank you for shopping with us details will be sent to you shortly
ShopName :Shoprite
Name : DogFood
Rand :150
Distance in Km :8309559.355265908
ShopName :Spar
Name : DogFood
Rand :100
Distance in Km :16471269.62219214 but now i need to to separate the list in two parts for readabilty purposes, so that if there are many shops that have the searched product the shopname with all the other items will be added but they should be grouped together i tried the </br> tags but just makes spaces between each item and dont make spaces between two groups, your help is appriciated i am very new to all this

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-13 5:35am

Ok post the updated which you are using now. I will try to modify.

klein_jnr 12-Dec-13 6:37am

Okay thank you so much here there working code
function GetProductDetails(barcodeId,coords)
{
$.getJSON("api/products/?barcodeId=" + barcodeId + "&latitude=" + coords.latitude + "&longitude=" + coords.longitude)
.done(function (data) {
$('#result').append(data.message)
console.log(data)
var list = $("#result").append('<ul></ul>').find('ul');
$.each(data.results, function (i, item)
{

if (data.results == null) {

$('#result').append(data.message)
}

else {

list.append('<li>ShopName :' + item.retailerName + '</li>');
list.append('<li>Name : ' + item.productName + '</li>');
list.append('<li>Rand :' + item.price + '</li>');
list.append('<li>Distance in Km :' + item.Distance + '</li>');

}

});

$("#result").append(ul);

});
}

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-13 6:45am

If you want to group them, then I would suggest you to make them one one "ul" instead of adding them under one "ul". Adding "br" tags in "ul" after "li" would not work.
So, try like below...

function GetProductDetails(barcodeId,coords)
{
$.getJSON("api/products/?barcodeId=" + barcodeId + "&latitude=" + coords.latitude + "&longitude=" + coords.longitude)
.done(function (data) {
$('#result').append(data.message)
console.log(data)

$.each(data.results, function (i, item)
{
if (data.results == null) {
$('#result').append(data.message)
}
else {
var list = $("#result").append('<ul></ul>').find('ul');
list.append('<li>ShopName :' + item.retailerName + '</li>');
list.append('<li>Name : ' + item.productName + '</li>');
list.append('<li>Rand :' + item.price + '</li>');
list.append('<li>Distance in Km :' + item.Distance + '</li>');
$("#result").append(ul);
}
});
});
}

klein_jnr 12-Dec-13 7:06am

This only shows one results in other words it only returns one array this is what it returns ShopName :Shoprite
Name : DogFood
Rand :150
Distance in Km :8309559.355265908 and does not return the secound one like this(reults that are not displayed ) ShopName :Spar
Name : DogFood
Rand :100
Distance in Km :16471269.62219214 i need to return both these results but they shouldnt be clustered first result must alone and visa versa

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-13 8:04am

I don't get you. Do you need space between each "li" like below...

ShopName :Shoprite

Name : DogFood

Rand :150

Distance in Km :8309559.355265908

Name : DogFood

Rand :100

Distance in Km :16471269.62219214

klein_jnr 12-Dec-13 8:16am

I need attributes like Dog Food,Rand,Distance to belong to one Shopname:Shoprite and all the other details to another SHopName :spar it like Shopname:Shoprite has to be a parent container to Name,Rand,Distance and SHopname:Spar has to be a parent container to Name,Rand,Distance too

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)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-12-11T02:44:00

You need to append that ul to another div or something then append all the li to that ul like below...

C#

else
{
    var list = $("#result").append('<ul></ul>').find('ul');

    list.append('<li>' + data.results.retailername + '</li>');
    list.append('<li>' + data.results.productname + '</li>');
    list.append('<li>' + data.results.price + '</li>');
    list.append('<li>' + data.results.distance + '</li>');
}