How to populate JSON response values in Jquery


Tags: javascript,jquery,html,css,ajax

Problem :

I got the result of a Ajax call in JSON array format, like this

var productList ={
"products": [
    {
        "brandName": "B1",
        "productID": "Pid1",
        "productName": "P1",
        "imagePath": "IP1",
        "mrp price": "9.99",
        "sell price": "8.99"
    },
    {
        "brandName": "B1",
        "productID": "Pid3",
        "productName": "P2",
        "imagePath": "IP2",
        "mrp price": "19.99",
        "sell price": "18.99"
    },
    {
        "brandName": "B1",
        "productID": "Pid3",
        "productName": "P4",
        "imagePath": "IP1",
        "mrp price": "29.99",
        "sell price": "558.99"
    }
]
};

Now in success function of ajax call, i want to create the <li> .. </li> elements for each product available in JSON response. I want to apply some CSS classes and Ids to elements. This is the format for li.

<li class='productWrap $productID' style='height:200px; width:150px;'>
<center> 
    <div class=\"productImageWrap\" id=\"productImageWrapID_+$productID\">
        <img src=$imagePath width='75' height='75' />
    </div>
    <div>
        <div style='font-size: 11px; font-family: \"Verdana\"; '> 
            $brandName + " " + $productName 
        </div>
        <b>                             
            <span>  
                <strike>   $mrp price  </strike>    
                $sell price 
            </span>
            <a href='#' id=\"featuredProduct_$data[0]\" onclick=\" adjust_menu(this.id); simpleCart.add('name=$brandName + " " + $productName', 'price=$sell price','image=$imagePath');             return false;\">   
                <img src='images/add-to-basket2.gif' alt='Add To Basket' width='111' height='32' id='featuredProduct_+$productID' />
            </a>
        </b>
    </div>
</center>
</li>

My doubt is How to populate these values in Ajax success function. The values that i need to populate is shown as $ prefix like $brandName $productName etc.

I not only want to fill these values to display but want to fill in such a way that i can access any element after filled-up (using CSS class and IDs that we are applying while populating) to use for Jquery click and Mouse Hover functions.



Solution :

You could do something like

   success: function(data){
         $ul = $('#theUl');
         data.products.each(function(){
             var li = "<li><h1 class='name'>"+this.brandName+" "+this.productName+"</h1></li>";
             $ul.append(li);
         });

   }

additionaly, if you want to have a click-event on h1.name you have to delegate the selector, because you push it into the DOM way after it is ready. That could look like :

$(document).on("click",".name",function(){
  alert('Yeah i successfully bound an event with an element that did not exist initially')
});

    CSS Howto..

    CSS: how can I make this table fit the border when resized?

    How to add CSS reference link to local HTML files in folder?

    How to bypass an overriding CSS Declaration

    CSS how to revert SVG animation on mouseout from current frame

    How to display block from left to right in css

    How to style multiple instances differently of the same jquery control?

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    Why is last select option always shown, even when styled out

    How do I make a hamburger menu display on the right side?

    How to get same effect as jQuery's slideToggle using CSS 3 transitions?

    How to create an image sprite that stretches both horizontal and vertically as a single image?

    How to fit an image according to screen size

    JavaScript, AngularJS: How do I know if element is larger than its container?

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    How to change the CSS of page dynamically based on value?

    How to style my HTML form using CSS

    How to correctly use text overflow in bootstrap

    How to make layout like notes in Google Keep using CSS?

    How to change pseudo class property?

    how to base a css rule on inherited value of dir attribute

    How to centrally assign a same CSS class to multiple elements, such as when using frameworks like Bootstrap?

    How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

    Greasemonkey how to apply a CSS rule only for @media print?

    How to put a space between the hover effect in this situation css html php?

    Finding correct CSS sheet when Chrome Inspector shows (index) [closed]

    How to Surround Links with Bounding Box Using CSS

    how to use automatic css hyphens with word-break: break-all?

    How to use GitHub's primer and octicons?

    How to move the POV of an image when using overflow: hidden?

    How to modify CSS when requirements change?