Update: How do I dynamically populate a list with data from a JSON file?

Question

I want to dynamically populate a list with elements from a JSON file. The idea is to switch the test_ID in the list with the actual object from the JSON file. How do I do this?

JSON file

 [
   {
     "id": "a",
     "test": "Java",
     "testDate": "2016-08-01"
   },
   {
     "id": "b",
     "test":"JavaScript",
     "testDate": "2016-08-01"
   }
 ]

jQuery

 $(function(){

  $.ajax({
    type : 'GET',
    url : 'json/data.json',
    async : false,
    beforeSend : function(){/*loading*/},
    dataType : 'json',
    success : function(result) {
  });

            $("#test_ID").empty(); //emtpy the UL before starting
            $.each(arr_json, function(i, v, d) {
             $("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");
        });
    }
   });
 });

HTML

 <li id="test_ID"></li>

I do receive a couple of errors. The Line:

$("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");

gives the following error: invalid number of arguments and unclosed String literal. I am also unsure of how to identify to specific elements in the JSON file.

Update I would like if the list element was in this format "Java 2016-08-01" and "JavaScript 2016-08-01". Thank you!

1. $.each( isn't closed. You need a closing curly brace and paren. 2. you haven't declared arr_json. It should be data — Brian
– Brian, Commented Feb 28, 2017 at 18:25
Changed "<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>" to "<li id="' + v.id +"' + v.test + '" >' + v.testDate + '<li>' and try again. You had mismatched quotes. — Justin Taddei
– Justin Taddei, Commented Feb 28, 2017 at 18:25

artemisian · Accepted Answer · 2017-02-28 20:05:15Z

2

You have a couple of errors in your javascript. See the corrected version below:

 $(function(){
   $.ajax({
     type : 'GET',
     url : 'json/data.json',
     async : false,
     beforeSend : function(){/*loading*/},
     dataType : 'json',
     success : function(result) {
            $("#test_ID").empty(); //emtpy the UL before starting

            // **************** correction made to the line below ***********************
            $.each(result, function(i, v, d) {                        

            // **************** correction made to the line below ***********************
            $("#test_ID").append('<li id="' + v.id + '">' + v.test + '  ' + v.testDate + '</li>');                         // correction made here
        });
    }
   });
 });

edited Feb 28, 2017 at 20:05

answered Feb 28, 2017 at 18:47

artemisian

3,1162 gold badges24 silver badges25 bronze badges

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

2 Comments

Josef Lundström Over a year ago

This works great! But how fo I do if I want the format of the list element to look like this: "Java 2016-08-01" and "JavaScript 2016-08-012?

Josef Lundström Over a year ago

Thank you so much artemisian for taking a part of your valuable time to help me!

Justin Taddei · Accepted Answer · 2017-02-28 19:58:08Z

2

I did a quick fiddle. I don't quite understand what you're doing with v.test being unmarked inside the HTML tags so I did not include it. I used minimal JQuery to avoid complexity.

https://jsfiddle.net/ndx5da97/

  for (record in data) {
    $("#test_ID").append('<li id="' + data[record].id + '">' + data[record].testDate + '</li>');
  }

Hope this helps!

edited Feb 28, 2017 at 19:58

Justin Taddei

2,3061 gold badge21 silver badges35 bronze badges

answered Feb 28, 2017 at 19:04

John Pavek

2,5853 gold badges17 silver badges36 bronze badges

Collectives™ on Stack Overflow

Update: How do I dynamically populate a list with data from a JSON file?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related