Convert JSON output from API to list of HTML links

Question

When I query the following API.

var json_obj;
$.getJSON("https://46il4vpccl.execute-api.eu-west-2.amazonaws.com/api/secblogfeed/Threatpost", function (data) {
json_obj = data;
});

I can then see the output using the following approach:

alert(json_obj.Items[0].title);
alert(json_obj.Items[0].link)

What I would like to do is return a list of all title and link as a hyperlink as follows by expanding on the code above:

(Desired output HTML would be like this on a web page).

<p><a href="link string here">title string here</a></p>
<p><a href="link string here">title string here</a></p>
etc

I have tried various ways of looping through this data but would like to learn how to do this efficiently. Thanks for any help.

loop throught item array and generate html using jquery

Devsi Odedra
– Devsi Odedra

2019-08-02 08:01:16 +00:00
Commented Aug 2, 2019 at 8:01 — Devsi Odedra
– Devsi Odedra, Commented Aug 2, 2019 at 8:01

Rory McCrossan · Accepted Answer · 2019-08-02 08:12:16Z

3

To achieve this you can use a loop through the Items property of the response to build the required HTML. The most succinct way of doing this would be to use map(), like this:

$.getJSON("https://46il4vpccl.execute-api.eu-west-2.amazonaws.com/api/secblogfeed/Threatpost", function(data) {
  var html = data.Items.map(function(item) {
    return `<p><a href="${item.link}">${item.title}</a></p>`;
  });
  $('#yourContainingElement').append(html);
});

Also note that I am getting a CORS error when making a request to that domain. I'd suggest you check that the request works for you.

answered Aug 2, 2019 at 8:12

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Abhishek Mathur · Accepted Answer · 2019-08-02 08:09:34Z

0

You can try to map the original object to a new filtered object like this

let list = json_obj.Items.map(e=>{
  return {title:e.title,link:e.link}
});

You can then use a for loop to generate elements for each element of this object as

function generateElement(item) {
    let p = document.createElement("p");
    let a = document.createElement("a");
    a.setAttribute("href",item.link);
    a.innerText = a.title;
    p.appendChild(a);
    return p;
}

answered Aug 2, 2019 at 8:09

Abhishek Mathur

4805 silver badges13 bronze badges

Collectives™ on Stack Overflow

Convert JSON output from API to list of HTML links

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related