Convert PHP array from AJAX response to Javascript Object

Question

I'm trying to create a JavaScript object based on a template I received as a test. I use Ajax to get the data from my database but i cant seem to create the object.

$(document).ready(function() {
  $.ajax({
    type: 'POST',
    url: 'fetch.php',
    dataType: 'JSON',
    success: function(response) {
      var test = JSON.parse(response);
      var products = {};
      for (var x = 0; x < test.length; x++) {
        products[x] = {
          productName: test[x]['name']
        };
        products[x] = {
          category: test[x]['category']
        };
        products[x] = {
          price: test[x]['price']
        };
      }
    }
  });
});

I'm trying to create something like this object below

products = {data: [
{
  productName: "test_item_1",
  category: "category1",
  price: "49",
  image: "test_image.jpg",
},
{
  productName: "test_item_2",
  category: "category3",
  price: "99",
  image: "test_image.jpg",
},
{
  productName: "test_item_3",
  category: "category3",
  price: "29",
  image: "test_image.jpg",
},],};

This is the how i fetch the data from my database

while($row = mysqli_fetch_assoc($run)){$datas[] = $row;}echo json_encode($datas);

why don't you create that object from fetch.php?

Michael Cozzolino
– Michael Cozzolino

2022-03-06 23:00:51 +00:00
Commented Mar 6, 2022 at 23:00 — Michael Cozzolino
– Michael Cozzolino, Commented Mar 6, 2022 at 23:00
Please post the JSON.

MikeM
– MikeM

2022-03-06 23:03:30 +00:00
Commented Mar 6, 2022 at 23:03 — MikeM
– MikeM, Commented Mar 6, 2022 at 23:03
In your second codeblock, products is not properly encoded.

ControlAltDel
– ControlAltDel

2022-03-06 23:04:08 +00:00
Commented Mar 6, 2022 at 23:04 — ControlAltDel
– ControlAltDel, Commented Mar 6, 2022 at 23:04
In PHP you can use function json_encode

ControlAltDel
– ControlAltDel

2022-03-06 23:04:58 +00:00
Commented Mar 6, 2022 at 23:04 — ControlAltDel
– ControlAltDel, Commented Mar 6, 2022 at 23:04
Why are you POST-ing with no data?

Phil
– Phil

2022-03-06 23:12:22 +00:00
Commented Mar 6, 2022 at 23:12 — Phil
– Phil, Commented Mar 6, 2022 at 23:12

md2perpe · Accepted Answer · 2022-03-06 23:04:51Z

1

Your lines with products[x] overwrite the earlier.

Change to

                  products[x] = {
                      productName: test[x]['name'],
                      category: test[x]['category'],
                      price: test[x]['price'],
                  };

answered Mar 6, 2022 at 23:04

md2perpe

3,1432 gold badges20 silver badges26 bronze badges

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

Comments

Phil · Accepted Answer · 2022-03-06 23:15:10Z

There's a couple of problems first...

The $.ajax() config option is dataType, not datatype
Specifying dataType: "json" means jQuery will automatically parse the response as JSON. You don't need to manually parse it again

As to your mapping problem, you can map the response array to a new one with name renamed to productName using Array.prototype.map()

$.ajax("fetch.php", {
  method: "POST",
  dataType: "json",
  // data: ¯\_(ツ)_/¯
}).done(data => {
  const products = {
    data: data.map(({ name: productName, category, price }) => ({
      productName,
      category,
      price
    }))
  };
});

Collectives™ on Stack Overflow

Convert PHP array from AJAX response to Javascript Object

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related