CODEWITHSUNDEEP
javascriptphpjsonajax
Razold1406
Razold1406

Reputation: 3

Place data from JSON Array in to a Javascript Array

I would like to place the data from the $data variable (ajax.php) into my this.products[ ] (store.js) array in the javascript file. How would i do this? Bearing in mind they are in to seperate files, can i link the two?

The ajax.php file returns the database data in webpage as follows:

[{"0":"100001","SKU":"100001","1":"Key Ring","Name":"Key Ring","2":"Personalised Key Ring","Description":"Personalised Key Ring","3":"5","Price":"5"}

ajax.php

<?php
//database settings
$connect = mysqli_connect("localhost", "root", "", "wrightr");

$result = mysqli_query($connect, "select * from storeitems");

$data = array();

while ($row = mysqli_fetch_array($result)) {
  $data[] = $row;
}
    echo json_encode($data);
?>

store.js - originally this.product[ ] contained LocalStorage values, but i would like then to contain the values from the JSON file in order from the database table.

//----------------------------------------------------------------
// store (contains the products)
//
function store() {
    this.products = [
 //example   new product (**field1**, **field2**, **field3**, etc...),
 //example   new product (**field1**, **field2**, **field3**, etc...),        
}
store.prototype.getProduct = function (sku) {
    for (var i = 0; i < this.products.length; i++) {
        if (this.products[i].sku == sku)
            return this.products[i];
    }
    return null;
}

Upvotes: 0

Views: 84

Answers (1)

Kevin Jantzer
Kevin Jantzer

Reputation: 9461

You need to use AJAX. Here are two options (you would use this in your store.js file)

Using jQuery [docs]

$.get('ajax.php', function(resp){
   // do something with resp
   console.log(resp) // [{"0":"100001"...
})

Vanilla JavaScript [docs]

var req = new XMLHttpRequest();
req.addEventListener("load", function(){
    if(req.status === 200) { 
        var resp = JSON.parse(req.response)
    }
});
req.open("GET", "ajax.php");
req.send();

Upvotes: 1

Related Questions