CODEWITHSUNDEEP
javascriptphpjqueryajax
JavaSa
JavaSa

Reputation: 6241

How to use jQuery in order to parse json and output it as a list into HTML?

I'm new to JS and Jquery.
I need to show result which are return from the server in json. I have a json array with the result which can be accessed through data["json"] variable.

Each result in array has a link and title.
I want to be able to show each pair on a single line as a part of some list in the HTML. Structure should be like:

title: [title] , link: URL
title: [title] , link: URL and so on.

I've tried using the following JS function without success( took it from here )

I think I didn't understood the function currectly therefore:
If you can also explain me the meaning of the part of the $.("list >ul) and the section of function(index, element) => what are the values the index and element getting and why?

 function DisplayListItems(list) {
        alert("in display:" + list["json"]);
        $.each(list["json"], function(index, element) {
            var itemHTML = ["<li>",
                        "<div>",
                        "<div>",
                            element.link,
                        "</div>",
                        "<div>",
                            element.title,
                        "</div>",                                    
                        "</div>",
                    "</li>"].join('\n');
            $(".list > ul").append(itemHTML);
        }
        }

Example Json result which the client should handle: 

[{"link":"http:\/\/en.wikipedia.org\/wiki\/Balloon","title":"Balloon - Wikipedia, the free encyclopedia"},{"link":"http:\/\/www.balloons.com\/","title":"Balloons.com - Wholesale Balloon Distributor"},{"link":"http:\/\/www.partycity.com\/category\/balloons.do","title":"Party Balloons, Helium Balloons & Balloon Accessories - Party City"},{"link":"http:\/\/clashofclans.wikia.com\/wiki\/Balloon","title":"Balloon - Clash of Clans Wiki"},{"link":"http:\/\/www.balloon-juice.com\/","title":"Balloon Juice"},{"link":"http:\/\/www.balloonfiesta.com\/","title":"The Albuquerque International Balloon Fiesta - Welcome to the ..."},{"link":"http:\/\/www.youtube.com\/watch?v=belCJJjut1A","title":"\"The Balloon Show\" for learning colors -- children's educational video"},{"link":"http:\/\/www.google.com\/loon\/","title":"Loon for All \u2013 Project Loon \u2013 Google"},{"link":"http:\/\/www.youtube.com\/watch?v=khsXGETCqVw","title":"\"Pretty Balloons\" (balloon song for learning colors) - YouTube"},{"link":"http:\/\/www.balloon-app.com\/","title":"Balloon"}]

Upvotes: 2

Views: 149

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 76464

jQuery.parseJSON is a function which takes a string as input and gives a Javascript object/array as output. Example:

var obj = jQuery.parseJSON(list["json"]);
console.log(obj);

So you should call parseJSON on your list before you iterate it. 

.list > ul

is a selector, in plain human language it could be read as:

All the ul elements, which happen to be the children of any elements, which have the class of list.

Simply put, selectors are logical experssions which determine what elements should be selected in a given case.

Upvotes: 1

Nishit Maheta
Nishit Maheta

Reputation: 6031

use below code . check working DEMO

  var list = [{"link":"http:\/\/en.wikipedia.org\/wiki\/Balloon","title":"Balloon - Wikipedia, the free encyclopedia"},{"link":"http:\/\/www.balloons.com\/","title":"Balloons.com - Wholesale Balloon Distributor"},{"link":"http:\/\/www.partycity.com\/category\/balloons.do","title":"Party Balloons, Helium Balloons & Balloon Accessories - Party City"},{"link":"http:\/\/clashofclans.wikia.com\/wiki\/Balloon","title":"Balloon - Clash of Clans Wiki"},{"link":"http:\/\/www.balloon-juice.com\/","title":"Balloon Juice"},{"link":"http:\/\/www.balloonfiesta.com\/","title":"The Albuquerque International Balloon Fiesta - Welcome to the ..."},{"link":"http:\/\/www.youtube.com\/watch?v=belCJJjut1A","title":"\"The Balloon Show\" for learning colors -- children's educational video"},{"link":"http:\/\/www.google.com\/loon\/","title":"Loon for All \u2013 Project Loon \u2013 Google"},{"link":"http:\/\/www.youtube.com\/watch?v=khsXGETCqVw","title":"\"Pretty Balloons\" (balloon song for learning colors) - YouTube"},{"link":"http:\/\/www.balloon-app.com\/","title":"Balloon"}]

 function DisplayListItems(list) {
  $.each(list, function(index, element) {
   var itemHTML = ["<li>",
                    "<div>",
                    "<div>",
                        element.link,
                    "</div>",
                    "<div>",
                        element.title,
                    "</div>",                                    
                    "</div>",
                "</li>"].join('\n');
        $(".list > ul").append(itemHTML);
  });
 }

 DisplayListItems(list)

Upvotes: 2

Related Questions