CODEWITHSUNDEEP
jqueryjsonajax
Ruby24
Ruby24

Reputation: 23

how to read a JSON with jquery? the JSON has data='[]';

how are you?

I have the following problem. at the university, they gave me a JSON file but the content of this is something particular. I have to fill a table with this JSON file I share them right away.

json:

data='[{"ID":"36","name":"Finland","population":"5300000","date":"August 21 2011","percentage":"2.05%"}]';

try to read it with the following code but it throws an error as it does not accept data = '[]';

HTML JQUERY

        //lee el archivo json
        $.getJSON("data/countries.json",function(data){
            //variable contructora de la tabla
            var employee_data = '';
            //obtener valores en bace a la llave
            $.each(data,function(key,value){
                employee_data += '<tr>';
                employee_data += '<td>'+value.ID+'</td>';
                employee_data += '<td><img src="imagenes/'+value.name+'" alt="'+value.name+'"></td>';
                employee_data += '<td>'+value.name+'</td>';
                employee_data += '<td>'+value.date+'</td>';
                employee_data += '<td>'+value.percentage+'</td>';
                employee_data += '</tr>';
            });
            //muestra el resultado de la tabla creada
            $('#tab-paises').append(employee_data);
        },'html').done(function(){
            
        }).fail(function(e){
            console.log("error");
            console.log(e)
        }).always(function(){
            
        });
    });

How could I read these types of files?

Upvotes: 1

Views: 131

Answers (3)

Ruby24
Ruby24

Reputation: 23

Thanks, I already solved it. Use part of the two codes. The final result was successful. I share the code.

$.ajax({
        url: "data/countries.json",
        dataType: "text",
        success: function(data) {
            eval(data);
            console.log(JSON.parse(data))
            data = JSON.parse(data);
            var row;
            $.each(data, function(i, r) {
                row = $("<tr>");
                $("<td>").html(r.ID).appendTo(row);
                $("<td>").html($("<img>", {
                  src: "imagenes/" + r.name,
                  alt: r.name
                })).appendTo(row);
                $("<td>").html(r.name).appendTo(row);
                $("<td>").html(r.date).appendTo(row);
                $("<td>").html(r.percentage).appendTo(row);
                $('#tab-paises').append(row);
              });
        },
        error: function(e) {
          console.log("error");
          console.log(e)
        }
      });

Upvotes: 1

user5542121
user5542121

Reputation: 1052

The string you have is actually valid Javascript code. And it does assign a JSON string to the variable data. Thus it can be processed like this:

const input = 'data=\'[{"ID":"36","name":"Finland","population":"5300000","date":"August 21 2011","percentage":"2.05%"}]\';';
eval(input);
console.log(JSON.parse(data))

Or even simpler,

data='[{"ID":"36","name":"Finland","population":"5300000","date":"August 21 2011","percentage":"2.05%"}]';
console.log(JSON.parse(data))

Upvotes: 0

Twisty
Twisty

Reputation: 30893

Consider the following example.

$(function() {
  // Test Code
  var testData = "data='[{\"ID\":\"36\",\"name\":\"Finland\",\"population\":\"5300000\",\"date\":\"August 21 2011\",\"percentage\":\"2.05%\"}]';";
  var regex = /data='(.*)';/;
  var myData = JSON.parse(testData.replace(regex, "$1"));
  console.log(myData);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can use this to cleanup the text. Once in the correct syntax, you can parse it.

You might consider using $.ajax() versus $.getJSON() in this case.

  $.ajax({
    url: "data/countries.json",
    dataType: "text",
    success: function(data) {
      if (data.indexOf("data=") == 0) {
        data.replace(/data='(.*)';/, "$1");
      }
      data = JSON.parse(data);
      var row;
      $.each(data, function(i, r) {
        row = $("<tr>");
        $("<td>").html(r.ID).appendTo(row);
        $("<td>").html($("<img>", {
          src: "images/" + r.name,
          alt: r.name
        })).appendTo(row);
        $("<td>").html(r.name).appendTo(row);
        $("<td>").html(r.date).appendTo(row);
        $("<td>").html(r.percentage).appendTo(row);
        $('#tab-paises').append(row);
      });
    },
    error: function(e) {
      console.log("error");
      console.log(e)
    });
  });

Upvotes: 0

Related Questions