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

Question

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"}]

Nishit Maheta · Accepted Answer · 2015-04-04 12:58:51Z

2

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)

answered Apr 4, 2015 at 12:58

Nishit Maheta

6,0413 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JavaSa Over a year ago

I tried to do something different, instead of the element.link I want to use <img src=[some url]> and I want to put the element.title next to the picture- not in a new line. I tried to do so but so no image appear, can you please show me an example to this?

JavaSa Over a year ago

of course look here :stackoverflow.com/questions/29449076/…

Lajos Arpad · Accepted Answer · 2015-04-04 13:20:08Z

1

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.

answered Apr 4, 2015 at 13:20

Lajos Arpad

80.4k42 gold badges123 silver badges235 bronze badges

1 Comment

Nishit Maheta Over a year ago

Let me explain . if you have json array in string format then you need $.parseJSON function . otherwise no nee d to use . also you dont need to use list['json'] .as in your json array there is no key like 'json'

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related