Tips for retrieving data from a JSON response with the specified structure

Question

Tips for retrieving data from a JSON response with the specified structure

When I make a request, the response is as follows:

{
    "data": [
        "http:\/\/www.domain.com.br\/anunciantes\/jorgediaz.y.com.r\/26\/img1.jpg",
        "http:\/\/www.domain.com.br\/anunciantes\/jorgediaz.t.com.r\/26\/img2.jpg"
    ]
}

I attempted to access the data like this:

$.ajax({
        url: "/imovel/recuperar_fotos",
         datatype: 'JSON',
         contentType: 'JSON',
        success: function (data) {
                  var i = 0;
               while(i < 3)
               {
                   alert(data[i]);
                   i++;
            }

        }
    });

But also tried using data[0][i] without success.

javascript json ajax

Answer 1

Answer №1

Because the response you are receiving contains an object with a data property that is an array, you can iterate over response.data (or data.data, depending on your code).

Here are three different ways to iterate over an array without using a while loop:

Method 1: Using the forEach method

$.ajax({
  url: "/imovel/recuperar_fotos",
  datatype: 'JSON',
  contentType: 'JSON',
  success: function (response) {
    var photos = response.data;
    photos.forEach(function(photo) {
      console.log(photo);
    })
  }
});

Method 2: Using the for ... in loop

$.ajax({
  url: "/imovel/recuperar_fotos",
  datatype: 'JSON',
  contentType: 'JSON',
  success: function (response) {
    var photos = response.data;
    for (var i in photos) {
      console.log(photos[i]);
    }
  }
});

Method 3: Using the classic for loop

$.ajax({
  url: "/imovel/recuperar_fotos",
  datatype: 'JSON',
  contentType: 'JSON',
  success: function (response) {
    var photos = response.data;
    for (var i = 0; i < photos.length; i++) {
      console.log(photos[i]);
    }
  }
});

Answer 2

Because the response you are receiving contains an object with a data property that is an array, you can iterate over response.data (or data.data, depending on your code).

Here are three different ways to iterate over an array without using a while loop:

Method 1: Using the forEach method

$.ajax({
  url: "/imovel/recuperar_fotos",
  datatype: 'JSON',
  contentType: 'JSON',
  success: function (response) {
    var photos = response.data;
    photos.forEach(function(photo) {
      console.log(photo);
    })
  }
});

Method 2: Using the for ... in loop

$.ajax({
  url: "/imovel/recuperar_fotos",
  datatype: 'JSON',
  contentType: 'JSON',
  success: function (response) {
    var photos = response.data;
    for (var i in photos) {
      console.log(photos[i]);
    }
  }
});

Method 3: Using the classic for loop

$.ajax({
  url: "/imovel/recuperar_fotos",
  datatype: 'JSON',
  contentType: 'JSON',
  success: function (response) {
    var photos = response.data;
    for (var i = 0; i < photos.length; i++) {
      console.log(photos[i]);
    }
  }
});

Answer 3

Answer №2

Give this a shot

$.ajax({
    url: "/property/get_photos",
    contentType: 'application/json',
    success: function(response) {
        for (var j = 0; j < response.data.length; j++) {
            console.log(response.data[j]);
        }
    }
});

Answer 4

Give this a shot

$.ajax({
    url: "/property/get_photos",
    contentType: 'application/json',
    success: function(response) {
        for (var j = 0; j < response.data.length; j++) {
            console.log(response.data[j]);
        }
    }
});

Tips for retrieving data from a JSON response with the specified structure

Answer №1

Answer №2

Similar questions

Using a combination of StringTokenizer, JSON, and commas to parse and manipulate data

Tips for executing a loop while waiting for a jQuery ajax request to complete

Failed installation of Semantic-ui through npm encountered

Tips for designing the microphone appearance on the Google Chrome speech input interface

How to update router query in Next JS without triggering a page change event

I am experiencing an issue where my React application is not loading the fonts when utilizing `type: 'asset/resource'` to load fonts within a CSS file. Can anyone provide guidance on

Issue: Module 'serialize-javascript' not found despite being present in the 'node_modules' directory after executing npm start command in ReactJS project

Implementing bi-directional data binding between sibling components in Vue.js

AutoComplete issues a warning in red when the value assigned to the useState hook it is associated with is altered

The element div is not permitted as a child of the element h5 in this particular scenario

Customize the label of the model in AngularStrap's typeahead ng-options to display something

Activate a button on-the-fly

Is it possible to set client-certificate as optional with Node SSL (using rejectUnauthorized: true does not achieve this)?

Discover ways to retrieve an ajax response from a different domain by submitting specific data to the controller method while operating on an internet server

Click the mouse to create a unique path from the list items within the <ul> <li> using jQuery

MySQL long polling technique in PHP

Converting Java objects to JSON and reversing JSON back to objects in a Spring Boot application with Redis

Enhance your webpage with our jQuery plugin that allows you to easily make Ajax

code for handling window.location.href error

Organize the array following the guidelines of a card game with a versatile approach