Using AJAX to retrieve a specific JSON object from an array of JSON data

Question

Using AJAX to retrieve a specific JSON object from an array of JSON data

Data retrieved in JSON array from the API:

[{"id":"001", "name":"john", "age":"40"}, {"id":"002", "name":"jane", "age":"30"}]

Using Ajax:

  $.ajax({                                      
  url: 'interface_API.php',                                                              
  dataType: 'json',                    
  success: function(data)         
  {
    for(var i in data){
        var row = data[i];

        var id = row.id;            
        var name = row.name;
        var age = row.age;

    $('#output').append("<tr width='50%'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td></tr>");
    }
  } 
});

The PHP code uses this logic to create the JSON object:

if(mysqli_num_rows($output)){
     while($row = mysqli_fetch_assoc($output)){
         $json[] = $row;
     }
}

However, I am getting 'undefined' repeatedly for each .append operation.

What is the correct way to extract each JSON object from the array and append it to the page?

javascript php jquery ajax json

Answer 1

Answer №1

modify this:

let id = row[0];            
let name = row[1];
let age = row[2];

to any of these options:

let id = row['id'];            
let name = row['name'];
let age = row['age'];

let id = row.id;
let name = row.name;
let age = row.age;

You had already accessed the data in this loop:

for(let i in data){
    let row = data[i]; // <----this line

Therefore, you only need to refer to it using object keys.

Answer 2

modify this:

let id = row[0];            
let name = row[1];
let age = row[2];

to any of these options:

let id = row['id'];            
let name = row['name'];
let age = row['age'];

let id = row.id;
let name = row.name;
let age = row.age;

You had already accessed the data in this loop:

for(let i in data){
    let row = data[i]; // <----this line

Therefore, you only need to refer to it using object keys.

Answer 3

Answer №2

To improve the for loop, consider implementing it in the following way:

$.ajax({                                      
  url: 'api_interface.php',                                                              
  dataType: 'json',                    
  success: function(response)         
  {
    for(let index in response){
        let row = response[index];

        let id = row.id;            
        let name = row.name;
        let age = row.age;

$('#results').append("<tr width='50%'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td></tr>"); 
}
} 
});

Answer 4

To improve the for loop, consider implementing it in the following way:

$.ajax({                                      
  url: 'api_interface.php',                                                              
  dataType: 'json',                    
  success: function(response)         
  {
    for(let index in response){
        let row = response[index];

        let id = row.id;            
        let name = row.name;
        let age = row.age;

$('#results').append("<tr width='50%'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td></tr>"); 
}
} 
});

Answer 5

Answer №3

Remember to utilize the key when extracting the JSON Object

let items=[
        {"id":"5","text":"example1"},
        {"id":"6","text":"example2"},
        {"id":"7","text":"example3"},
        {"id":"8","text":"example4"}

         ]


    console.log(items[1].text)

Answer 6

Remember to utilize the key when extracting the JSON Object

let items=[
        {"id":"5","text":"example1"},
        {"id":"6","text":"example2"},
        {"id":"7","text":"example3"},
        {"id":"8","text":"example4"}

         ]


    console.log(items[1].text)

Using AJAX to retrieve a specific JSON object from an array of JSON data

Answer №1

Answer №2

Answer №3

Similar questions

The PHP regular expression syntax can be used to capture all occurrences of a specific format

Is there a way to implement absolute imports in both Storybook and Next.js?

Displaying Real-Time Values in ReactJS

Using JavaScript to create a dynamic to-do list that persists on the browser even when refreshed

How can I utilize a filter or pipe to populate product categories onto screens within Ionic 2?

pythonWhy is textwrap giving unexpected results when formatting in JSON?

Using webpack to load the css dependency of a requirejs module

Having issues displaying the & symbol in HTML from backend data

What changes can be made to index.php in order to access my website through a specific directory?

Interested in retrieving JSON information from a URL within Jupyter Notebook?

Building an array of ids that contain the checkbox type using jQuery: What's the best way?

Mobile Windows Z-Index

Having trouble grasping the error message "Uncaught Typerror Cannot Read Property of 0 Undefinded"?

The process of JavaScript for detecting and extracting text from

I need help figuring out the right way to define the scope for ng-model within a directive

``Please proceed with the form submission only if it has been verified and

Changing the label of a ChoiceType in Symfony2

Rest parameter ...args is not supported by Heroku platform

Folding without extending

Safari's Failure to Execute Ajax Requests