How to put the url inside the button?

Question

How to put the url inside the button?
I'm not able to pull the json url for this code, what is wrong?

// listar();
        
function listar() {
  var url_string = window.location.href;
  var url = new URL(url_string);
  var ponto = url.searchParams.get("jsonProdutos");
  console.log(ponto)
  var html = '';
  var quantidadeDados = 0;
  for(var i = 0; i < jsonProdutos.length; i++){
    html +='<div class="col-md-4 mb-4">';
    html +='    <div class="body-card card-links">';
    html +='        <div class="col-sm-6 col-lg-4">';
    html +='          <div class="col-md-12">';
    html +='               <img src="' + jsonProdutos[i].imagem + '" class="img-fluid">';
    html +='           </div>';
    html +='        </div>';
    html +='            <p>' + jsonProdutos[i].nome + '</p>';
    html +='            <h3  style="color: #005fbb";>' + jsonProdutos[i].preco + '<h3>'; 
  **html +='            <p><a href="?id=produtos&jsonProdutos=JSON.stringify(jsonProdutos[i])" class="btn btn-default" role="button";> Ver Produto </a></p>';**            
    html +='    </div>';
    html +='</div>';
  }
  $('#bodyIndicacao').html(html);
}

You are adding the code as a string and not its actual result. Just concat it like all the other properties in your example. `"?id=produtos&jsonProdutos="' + JSON.stringify(jsonProdutos[i]) + '"` — Lain, Jun 25 '20 at 12:15
It didn't work, I don't know if the problem is in the url var — Mirella Silveira, Jun 25 '20 at 12:44
Passing the whole json in the url is not ideal. URL are limited, public and encoded. — JavaScript, Jun 25 '20 at 13:38
@Mirella Silveira: The provided code alone makes no sense. You have unused declarations like `ponto` and `quantidadeDados`. There is no definition/source of `jsonProdutos`. Just clean up your code while checking the console and you will find the issue on your own. — Lain, Jun 25 '20 at 13:45
the "ponto" is about the url and "quantidadededados" is part of the loop, if i take out this variable that will not work. Clean code is being difficult for a beginner, thanks, Lain — Mirella Silveira, Jun 25 '20 at 13:50

score 0 · Answer 1 · answered Jun 25 '20 at 12:17

0

This JSON.stringify(jsonProdutos[i]) is not getting evaluated its been added as a it is as a string to all the links:

Try this

html +='<p><a href="?id=produtos&jsonProdutos=' + JSON.stringify(jsonProdutos[i]) + '" class="btn btn-default" role="button";> Ver Produto </a></p>';

answered Jun 25 '20 at 12:17

Marik Ishtar

2,899
1
13
27

It didn't work, I don't know if the problem is in the url var – Mirella Silveira Jun 25 '20 at 12:39
provide the result of console.log(ponto) – Marik Ishtar Jun 25 '20 at 12:58

score 0 · Answer 2 · answered Jun 25 '20 at 14:23

This is an assumption of how it should work. The content of your a[href] was incorrect due to wrong concating and the missing encoding. See below for a running and commented example:

//REM: Apparently somewhere in your URL, there is a key "jsonProdutos" containing json.
var tSampleURL = 'https://www.wayne.com?jsonProdutos=[{"imagem":"image1","nome":"nome1","preco":"preco1"},{"imagem":"image2","nome":"nome2","preco":"preco2"}]';

function listar(url){
  //REM: Removed since I do not have your URL
  //var url_string = window.location.href;
  //var url = new URL(url_string);

  //REM: Not sure what this is for. Probably jsonProdutos
  //var ponto = url.searchParams.get("jsonProdutos");
  //console.log(ponto)

  //REM: The value of "jsonProdutos" from the URL
  var jsonString = new URL(url || window.location.href).searchParams.get('jsonProdutos');

  //REM: The actual values of "jsonProdutos";
  var jsonProdutos = [];
  if(jsonString){
    //REM: Parsing the querystring value into an object
    jsonProdutos = JSON.parse(jsonString)
  };
    
  //REM: Template of the HTML
  var tTemplate = '';
  tTemplate +='<div class="col-md-4 mb-4">';
  tTemplate +='    <div class="body-card card-links">';
  tTemplate +='        <div class="col-sm-6 col-lg-4">';
  tTemplate +='          <div class="col-md-12">';
  tTemplate +='               <img src="@imagem." class="img-fluid">';
  tTemplate +='           </div>';
  tTemplate +='        </div>';
  tTemplate +='            <p>@nome.</p>';
  tTemplate +='            <h3 style="color: #005fbb";>@preco.<h3>'; 
  tTemplate +='            <p><a href="?id=produtos&jsonProdutos=@json." class="btn btn-default" role="button"; onclick="return _test(this)"> Ver Produto </a></p>';            
  tTemplate +='    </div>';
  tTemplate +='</div>';
    
  //REM: If there are any entries in jsonProdutos
  if(jsonProdutos && jsonProdutos.length){
    //REM: The HTML that gets added into $('#bodyIndicacao')
    var html = '';

    //REM: Does not get used anywhere
    //var quantidadeDados = 0;

    for(var i = 0; i < jsonProdutos.length; i++){
      //REM: Adding the replaced template to the html
      html += tTemplate
        .replace(/@imagem./g, jsonProdutos[i].imagem)
        .replace(/@nome./g, jsonProdutos[i].nome)
        .replace(/@preco./g, jsonProdutos[i].preco)
        //REM: stringifying and encoding the object to JSON
        .replace(/@json./g, encodeURIComponent(JSON.stringify(jsonProdutos[i])))
    };

    //REM: Adding the html
    $('#bodyIndicacao').html(html)
  }
};

//REM: Test function
function _test(a){
  alert(
    'URL: ' + decodeURI(a.href) + '\n\n' +
    'jsonProdutos: ' + new URL(a.href).searchParams.get('jsonProdutos')
  );
  
  return false
};

//REM: Starting the process
listar(tSampleURL);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = 'bodyIndicacao'></div>

How to put the url inside the button?

2 Answers2