How to display json url to html?

Question

I am very slow in jquery, I tried to research regarding on how to display json file from url to html but it seems i didnt get the code. I just want to display this json data here: http://api.paperstreetjobs.com/exam/show/getProblems

I want to display to my html every question and difficulty value inside the array.

my json:

[
[
   {
    "id":26,"question":"What html element will the following CSS code selects?\r\n\r\nli:not(#foo) > fieldset > div > span > input[type='radio'], \r\nli:not(#foo) > fieldset > div > span > input[type='checkbox']",
    "note":"",
    "difficulty":"easy",
    "language":"css"
   }
],
[
   {
     "id":18,"question":"Try to figure out what is wrong with the codes below. Explain your answer\r\n\r\n",
     "note":"",
     "difficulty":"average",
     "language":"php"
   }
],
[
   {
     "id":112,
     "question":"Assuming there is a sample.json file inside your directory. That contains\r\n{\"1\":{\"id\":1,\"clicks\":100,\"stars\":5},\"2\":{\"id\":2,\"clicks\":120,\"stars\":2},\"3\":{\"id\":3,\"clicks\":60,\"stars\":3}}\r\n \r\nGet the value of the json file\r\nSort the values according to its \u201cstars\u201d descending and \u201cclicks\u201d descending.\r\nReplace the sample.json content to the sorted value assuming that the file is writable.\r\nAssuming that the values changes once a day, your code should adopt to the values of \u201cclicks\u201d and \u201cstars\u201d",
     "note":"",
     "difficulty":"hard",
     "language":"php"
   }
]
]

Pls help me and guide me. thanks in advance!

Egor Malkevich · Accepted Answer · 2016-01-14 21:58:14Z

2

It's simple.

$.get( "http://api.paperstreetjobs.com/exam/show/getProblems", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

you may use @Deep code to render it.

Best

Egor

answered Jan 14, 2016 at 21:58

Egor Malkevich

1,5461 gold badge11 silver badges26 bronze badges

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

1 Comment

xerwudjohn Over a year ago

yeah. thanks sir. @deep code was i looking for. using for loop! thanks for your help too!

Deep · Accepted Answer · 2016-01-14 22:03:07Z

1

This is callback code for complete ajax query:

var
    itemsBox = $('#items-box'),
    i;

for (i = 0; i < yourJSON[0].length; i++) {
    itemsBox.append(''
        + '<div>id: '         + yourJSON[i][0].id         + '</div>'
        + '<div>question: '   + yourJSON[i][0].question   + '</div>'
        + '<div>note: '       + yourJSON[i][0].note       + '</div>'
        + '<div>difficulty: ' + yourJSON[i][0].difficulty + '</div>'
        + '<div>language: '   + yourJSON[i][0].language   + '</div>'
    );
}

edited Jan 14, 2016 at 22:03

answered Jan 14, 2016 at 21:51

Deep

2,5442 gold badges17 silver badges27 bronze badges

2 Comments

xerwudjohn Over a year ago

Hello sir, the json file is from api.paperstreetjobs.com/exam/show/getProblems how i gonna retrieve this to display?

xerwudjohn Over a year ago

oh i think i get it now sir, i put your code inside to this code

var myJson = "http://api.paperstreetjobs.app:8000/exam/show/getProblems";                 $.getJSON(myJson, function(result)

Collectives™ on Stack Overflow

How to display json url to html?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related