Parsing JSON object in JavaScript/JQuery

Question

I have a Json object as following.

{
"firstName":"John", 
"lastName":"Doe"
"123":"456"
}

I want to access they keys and value. After reaching, I will set them into fields. But I don’t why it doesn’t work. I’ve checked its syntax has no problem.

What I’ve tried,

$(document).ready(function f() {
    $.ajax('http://soner.dev/test.txt', {
        success: function(data, status, xhr) {
            $(data).each(function(i,val)
            {
                $.each(val,function(key,val)
                {
                    console.log(key + " : " + val);     
                    alert(key + " : " + val);  
                    $('#{key}').val(val);   
                });
            });
            setTimeout(f, 1000); // refresh the data at each second(data changes at each 1sec)
        }
    });
});

By the way, $('#{key}').val(val); in which I try to use Template Literals.

That's not a valid array in JSON format (JSON is a text format). That is a valid object in JSON format, however. You might want to look over that documentation for Template Literals again; you need to use the tick mark, not the single quote, and use the dollar sign, not the pound symbol. — Heretic Monkey
– Heretic Monkey, Commented Jul 10, 2019 at 12:27
I'm not sure what I'm supposed to take away from that link. It doesn't contradict what I said at all — Taplar
– Taplar, Commented Jul 10, 2019 at 12:27
@pathurs asumptions is how we get stuck on a question trying to solve problems that we make up, rather than solving the OPs actual problem. which is why we ask questions in comments, not just answer based off our assumptions — Taplar
– Taplar, Commented Jul 10, 2019 at 12:37

ADyson · Accepted Answer · 2019-07-10 12:45:58Z

2

You've got an object there, not an array. In JSON, objects are wrapped with { and } and have named properties like "firstName" etc. Arrays are wrapped with [ and ] and have numbered indexes like 0, 1, 2 etc.

Consequently you can make your looping a lot simpler and just iterate over the object keys directly.

N.B. You also need to parse the data from JSON (i.e. a notation format in plain text) into a JavaScript variable before you can begin. Since you're using jQuery's $.ajax() you can set the dataType: "json" option which causes jQuery to process the response as JSON and parse it for you automatically before it provides the data to your callback.

I also fixed your template literal syntax - you need to use backticks (`) and the dollar sign to make it work.

Here's a runnable demo (using a dummy endpoint since yours doesn't support CORS):

$(document).ready(function f() {
  $.ajax({
    url: "https://api.myjson.com/bins/ntsyj",
    dataType: "json"
  }).done(function(data) {
    $.each(data, function(key, val) {
      console.log(key + " : " + val);
      $(`#${key}`).val(val);
    });
    //setTimeout(f, 1000); // refresh the data at each second(data changes at each 1sec)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="firstName" />
<input id="lastName" />
<input id="123" />

edited Jul 10, 2019 at 12:45

answered Jul 10, 2019 at 12:39

ADyson

62.9k16 gold badges85 silver badges99 bronze badges

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

4 Comments

Taplar Over a year ago

$.getJSON() is also an option, for us lazy developers, :)

Soner from The Ottoman Empire Over a year ago

Thank you indeed but I don’t understand the meaning of (using a dummy endpoint since yours doesn't support CORS).

ADyson Over a year ago

@snr I can't make an AJAX request to your original URL because it doesn't allow CORS (i.e. cross-domain) AJAX requests. So I just substituted it for a URL which does, so that the demo will run. myjson is a useful site which lets you add snippets of JSON and expose them via a URL, precisely for testing this kind of code. Anyway that's just an irrelevant detail. The main point of my answer is the changes to the actual code, not the URL. Did it help you? If so then please consider marking as accepted - thanks :-)

Soner from The Ottoman Empire Over a year ago

@ADyson of course every letter is invaluable for me. I just wonder its meaning. Thanks a lot.

agtabesh · Accepted Answer · 2019-07-10 12:35:17Z

0

The response is a plain string so yo. firstly, you need to parse it using build-in JSON.parse() function and then you can iterate over it.

To use template literal, you should put your variable between ${ and }.

Please consider the code bellow:

$(document).ready(function f() {
    $.ajax('http://soner.dev/test.txt', {
        success: function(data, status, xhr) {
            var parsedData = JSON.parse(data);
            $.each(parsedData, function( key, val ) {
                console.log(key + " : " + val);     
                alert(key + " : " + val);  
                $(`#${key}`).val(val);
            });
            setTimeout(f, 1000); // refresh the data at each second(data changes at each 1sec)
        }
    });
});

edited Jul 10, 2019 at 12:35

answered Jul 10, 2019 at 12:29

agtabesh

5683 silver badges16 bronze badges

2 Comments

Soner from The Ottoman Empire Over a year ago

It doesn’t alert and console.log ? Can you exemplify it on jsfiddle?

agtabesh Over a year ago

You can't make ajax request in jsfiddle because of CORS but I've tested it and it works as you expected. I've got three alert each second containing object keys and values.

Collectives™ on Stack Overflow

Parsing JSON object in JavaScript/JQuery

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related