How to convert HTML to JSON?

Question

I have the following script:

function abreJanela(URL) {
location.href = URL; // se for popup utiliza o window.open
}

<select name="paginas" onchange="javascript: abreJanela(this.value)">
<option value="#" selected>Selecione o Estado</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-7/">BA</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-2/">CE</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-3/">DF</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-4/">ES</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-5/">GO</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-6/">MG</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2/">MS</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-8/">MT</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-9/">PR</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-10/">RS</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-11/">SC</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-12/">SP</option>
<option value="http://webdanfortunato.com/premiumleiloes/planilhas-3-2-13/">TO</option>
</select>

I need it in JSON, I found something similar and very useful in this example: https://www.w3schools.com/js/tryit.asp?filename=tryjson_html_select

But in the example it does not show what is inside the file "json_demo_db_post.php" ... Can anyone help me? From what I realized if I get the contents of the file "json_demo_db_post.php" I can achieve my goal.

Answer 1

Inside this file has a Json Encoded String

You can generate by php using the json_encode(); and can convert Arrays and Bank Returns

<?php
    $arr = array("MG"=>"http://site.com","SP" => "http://outro.com");
    echo json_encode($arr);
?>

The result will be as follows

{"MG":"http:\/\/site.com","SP":"http:\/\/outro.com"}

That’s probably what’s in that file

But as mentioned above you can create your Json manually At this link you will find the documentation on

An example creates a Myfile.json

and put on something similar

{
"estados":[
    {"UF":"MG", "LINK":"http://site.com"}, 
    {"UF":"BA", "LINK":"http://site.com"}
]
}

and so on

Answer 2

If I understand you want to turn JSON into HTML...

You can create your json:

var json = [
    {UF: 'RS', link: 'http://google.com'},
    {UF: 'SP', link: 'http://google.com'},
    //...
]

Make a loop to read:

var op = ''
for(var i = 0; i < json.length; i++) {
    op += '<option value="' + json[i].link + '">' + json[i].UF + '</option>'
}

And use innerHTML to show:

document.getElementById('id_select').innerHTML = op

Answer 3

Create a PHP document (eg., pagina_com_json.php) giving echo with content in JSON format:

<?php
echo '[
   { "UF": "BA", "pasta": "planilhas-3-2-7" },
   { "UF": "CE", "pasta": "planilhas-3-2-2" },
   { "UF": "DF", "pasta": "planilhas-3-2-3" }
]';
?>

Then you pull PHP content with Ajax, convert it to JSON object with JSON.parse(), assemble the options and inserts into the select:

document.addEventListener("DOMContentLoaded", function(){

   var http = false;
   http = new XMLHttpRequest();

   var url_="pagina_com_json.php";
   http.open("GET", url_, true);
   http.onreadystatechange=function(){
      if(http.readyState==4){
         var json = JSON.parse(http.responseText),
             html = '';

         json.forEach(function(e){
            html += '<option value="http://webdanfortunato.com/premiumleiloes/'+e.pasta+'">'+e.UF+'</option>';
         });

         document.querySelector("select[name='paginas']").innerHTML += html;
      }
   }
   http.send(null);

});

Initially, let the select only with the first option, the others will be inserted by Ajax above:

<select name="paginas" onchange="javascript: abreJanela(this.value)">
   <option value="#" selected>Selecione o Estado</option>
</select>