How to return single array?

Question

0.00/5 (No votes)

See more:

Hi, I am using async/await to fetch a file (createCharge.php) that contains arrays with data inside.

Here is my html page that has the <button> that fetches the createCharge.php file arrays data, the createCharge.php also creates a 'hosted_url' that the customer will use to navigate to the payment.

Currently I can return all array data into the console including the newly generated 'hosted_url' but how do I return just that one result? and how would I return it so that it goes into the <a> tag? Any help would be great :)

HTML Page...

<button id="btn">Pay with Crypto?</button>

<p id="pay"></p>

<script>
const btn = document.getElementById('btn');
const pay = document.getElementById('pay');

btn.onclick = async() => {
const response = await fetch('coinbasePHPtest/createCharge.php/');
const newurl = await response.text();

console.log(newurl);

pay.innerHTML = `<a href="${newurl.hosted_url}">Pay Now!</a>`
}
</script>

And here is my createCharge.php that creates the 'hosted_url' link and also contains the arrays with data...

(The 'hosted_url' isn't shown here in the arrays data because it gets created automatically when the button on the html page is clicked.)

createCharge.php...

<?php
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, 'https://api.commerce.coinbase.com/charges');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(
array (
  'name' => 'My-Company',
  'description' => 'Selected Product',
  'local_price' => 
  array (
    'amount' => '21.00',
    'currency' => 'GBP',
  ),
  'pricing_type' => 'fixed_price',
  'metadata' => 
  array (
    'customer_id' => 'uid_1',
    'customer_name' => 'Satoshi Nakamoto',
  ),
  'redirect_url' => 'https://www.mysite.com/Checkout/payment_successful.php',
  'cancel_url' => 'https://www.mysite.com/Checkout/payment_cancelled.php',
)
));

$headers = array();
$headers[] = 'Content-Type: application/json';
$headers[] = 'X-Cc-Api-Key: MY-API-KEY';
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$result = curl_exec($ch);

curl_close($ch);


return json_decode($result, true)['hosted_url'];

?>

What I have tried:

I have tried changing the <a href=""> in multiple ways...

pay.innerHTML = `<a href="${hosted_url}">Pay Now!</a>`

pay.innerHTML = `<a href="{hosted_url}">Pay Now!</a>`

pay.innerHTML = `<a href="${newurl->hosted_url}">Pay Now!</a>`

pay.innerHTML = `<a href="{.hosted_url}">Pay Now!</a>`

I also tried messing around with the fetch part with no luck...

btn.onclick = async() => {
const response = await fetch('coinbasePHPtest/createCharge.php/hosted_url');
const newurl = await response.text();

&

btn.onclick = async() => {
const response = await fetch('coinbasePHPtest/createCharge.php/hosted_url');
const newurl = await response.json();

Posted 31-Oct-21 5:02am

User 15365431

Updated 2-Nov-21 0:37am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-11-02T00:37:00

Your PHP script is returning the URL as text. Your newurl variable will be a string containing the URL. It doesn't have a property called hosted_url, so newurl.hosted_url will be undefined.

You haven't declared a variable called hosted_url in your Javascript, so injecting that will also return undefined.

Using href="{hosted_url}" won't inject anything, since that's not a valid Javascript interpolated string.

href="${newurl->hosted_url}" will generate a syntax error, since that's not valid Javascript syntax.

And href="{.hosted_url}" also won't inject anything, since it's not a valid Javascript interpolated string.

Try:

JavaScript

btn.addEventListener('click', async (e) => {
    e.preventDefault();
    
    const response = await fetch('coinbasePHPtest/createCharge.php/');
    if (!response.ok) {
        const errorMessage = await response.text();
        console.error(response.status, response.statusText, errorMessage);
        alert('There was an error creating the charge.');
        return;
    }
    
    const newurl = await response.text();
    console.log(newurl);
    
    pay.innerHTML = `<a href="${newurl}">Pay Now!</a>`;
});