How to access JSON element from jQuery Ajax

Question

I want to target a specific element in my JSON file:

{
  "taskMeta": "Some meta info",
  "tasksLib": [
    {
     "task001":
         {
            "id":"1",
            "createDate":"01.02.17",
            "dueDate":"02.03.17",
            "author":"Author name",
            "tag":"Things",
            "description":"Here's a description of the todo",
            "priority":"1",
            "color":"danger",
            "title":"btn-danger",
            "content":"Here's the notes content"
         },
     "task002":
         {
            "id":"2",
            "createDate":"02.02.17",
            "dueDate":"05.03.17",
            "author":"Author name",
            "tag":"Other things",
            "description":"Here's another description of the todo",
            "priority":"0",
            "color":"info",
            "title":"Foo",
            "content":"Here's some amazing content"
         }

     }
  ]
}

Then it gets loaded in this js file:

$.ajax({
     type:     'GET',
     url:      'includes/tasks.json',
     dataType: 'json',
     success: function(task) {

        $.each(task, function(i, task){
           console.log(
              task.taskLib[0].id
           );
...

This gives me:

Uncaught TypeError: Cannot read property '0' of undefined

be wary: you have defined task twice: success: function(task) { $.each(task, function(i, task){ — Adam
– Adam, Commented Apr 5, 2017 at 18:14

Christos · Accepted Answer · 2017-04-05 18:37:28Z

4

You have first to parse your JSON:

var tasksData = JSON.parse(task);

Then you can loop through your tasks as below:

$.each(tasksData.tasksLib, function(i, task){
    console.log(task.id);
}

edited Apr 5, 2017 at 18:37

answered Apr 5, 2017 at 18:12

Christos

54.1k9 gold badges82 silver badges114 bronze badges

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

4 Comments

xDreamCoding Over a year ago

that $.each(task, function(i, task) triggered me^^

Christos Over a year ago

@xDreamCoding You are correct. I did the corresponding correction. Thanks

xDreamCoding Over a year ago

Sorry i didn't mean to confuse you. I ment his code with the variablenames he choose, like double use of task. I think it's wrong now still, change: task.taskLib[0].id to task.id

Christos Over a year ago

Not a problem at all dude ! Yeap there are a couple of misnamings. I think now it's fixed. Thanks again,

Rohìt Jíndal · Accepted Answer · 2017-04-06 08:27:23Z

Some observations :

It's tasksLib, not taskLib

You should use Object.keys() method:

var keys=Object.keys(task.tasksLib[0]);
console.log(task.tasksLib[0][keys[0]].id)

var task={
"taskMeta": "Some meta info",
"tasksLib": [
    {
     "task001":
         {
            "id":"1",
            "createDate":"01.02.17",
            "dueDate":"02.03.17",
            "author":"Author name",
            "tag":"Things",
            "description":"Here's a description of the todo",
            "priority":"1",
            "color":"danger",
            "title":"btn-danger",
            "content":"Here's the notes content"
         },
     "task002":
         {
            "id":"2",
            "createDate":"02.02.17",
            "dueDate":"05.03.17",
            "author":"Author name",
            "tag":"Other things",
            "description":"Here's another description of the todo",
            "priority":"0",
            "color":"info",
            "title":"Foo",
            "content":"Here's some amazing content"
         }

     }
]
}
var keys=Object.keys(task.tasksLib[0]);
keys.forEach(function(item){
   console.log(task.tasksLib[0][item].id)
});

Collectives™ on Stack Overflow

How to access JSON element from jQuery Ajax

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related