jQuery getJSON() getting data values

Question

This is an external 'data.json' sample to be formatted like this:

    {
    "A": [{"title": "Accountant", "name": "Adam"}],
    "B": [{"title": "Beefeeter", "name": "Brandon"}],
    "C": [{"title": "Coder", "name": "Charles"}],
    "D": [{"title": "Doctor", "name": "David"}]
    }

And this is the JS part for it with questions in //....

    <script>
    $(document).ready(function(){
    $.getJSON("data.json", function(data){
        $('title').html(data....title); // What is the best way to access/get the value of title, say Beefeeter in B?
        $('name').html(data....name); // What is the best way to access/get the value of name, say Coder in C?
        .....
        });
    });
    </script>

Thank you for helping.

data.B[0].title, data.C[0].name

Rory McCrossan
– Rory McCrossan

2017-09-09 22:55:30 +00:00
Commented Sep 9, 2017 at 22:55 — Rory McCrossan
– Rory McCrossan, Commented Sep 9, 2017 at 22:55

Carsten Massmann · Accepted Answer · 2017-09-11 17:02:15Z

2

Simply do

$.getJSON("data.json", function(data){
    $('title').html(data.B[0].title); // Beefeeter in B
    $('name').html(data.C[0].title); // Coder in C
    .....
    });

Looking at it again I am not quite sure what is behind your jquery selectors 'title' and 'name'. These are not standard HTML tag names. Did you maybe intend to refer to elements with id="title" and id="name"? In that case the selectors should be $('#title') and $('#name') instead.

Edit:

If you want to access the actual keys 'A', 'B', 'C' and so on, you could list them together with the values using the Object.entries() method:

var arr=Object.entries(data); // this turns data into an array arr
// You can then step through that array and use the key (obj[0]) itself
// and of course all properties of the object-type values (obj[1]):
arr.forEach(function(i,obj){ // i is just a numeric index: 0,1,2,...
  console.log( obj[0] /* A, B, C... */, obj[1].title, obj[1].name);
}

edited Sep 11, 2017 at 17:02

answered Sep 9, 2017 at 22:55

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

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

4 Comments

cyodax Over a year ago

You're right. At the last minute I switched 'title' to 'name' before I submitted and did not think about it. And yes, 'title' is the HTML element, but 'name' is not but a class identifier. Lovely, simple and clear answer. I humbly thank you so much.

cyodax Over a year ago

BTW, if I would like to access the value 'A', 'B', 'C', or 'D' (not value of but the value A, value B, value C, etc, itselves) in the data.json of {...}, would I be able to do that? Thanks much.

cyodax Over a year ago

I think I go it: Object.keys(data) to return A, B, C, D. Object.keys(data)[2]) to return C. Thank you.

Carsten Massmann Over a year ago

Yep, if you need the keys only, then Object.keys() is the easiest way to go.

vladatr · Accepted Answer · 2017-09-09 23:37:45Z

0

If you don't know your categories in advance (A, B, C, etc.) the only approach is to iterate through the json.

var list = jQuery.parseJSON( data );
for( var key in list) {
    $('title').html(list[key][0].title);
    $('name').html(list[key][0].name);
 }

In addition, you can append as many divs as your json file has categories (if you want).

answered Sep 9, 2017 at 23:37

vladatr

6266 silver badges15 bronze badges

1 Comment

cyodax Over a year ago

Another big THANK YOU to the master. I benefit from asking this question.

Collectives™ on Stack Overflow

jQuery getJSON() getting data values

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related