CODEWITHSUNDEEP
javascriptphpjson
LiTHiUM2525
LiTHiUM2525

Reputation: 307

Read JSon string with Javascript and PHP

In a Javascript file i receive this JSon string into a hidden html string:

<input id="page_json_language_index" type="hidden" value="[{"id":"label_accept_terms","fr":"En cliquant sur le bouton ci-dessous, vous accepter de respecter les "},{"id":"label_and","fr":" et la "},{"id":"label_birthdate","fr":"Anniversaire"},{"id":"label_bottom_about","fr":"\u00c0 propos de GayUrban"},{"id":"label_bottom_contact","fr":"Contactez-nous"},{"id":"label_bottom_copyright","fr":"\u00a9 2010-2013 GayUrban.Com - Tous droits r\u00e9serv\u00e9s"},{"id":"label_bottom_privacypolicy","fr":"Vie priv\u00e9e"},{"id":"label_bottom_termsofuse","fr":"Conditions d`...mon courriel"},{"id":"label_signon_twitter","fr":"Avec Twitter"},{"id":"label_slogan","fr":"LE site des rencontres LGBT !"},{"id":"label_terms_of_use","fr":"Conditions d`utilisation"},{"id":"label_title","fr":"Bienvenue sur GayUrban | LE site des rencontres LGBT !"},{"id":"label_transgender","fr":"Transgendre"},{"id":"label_username","fr":"Nom d`utilisateur"},{"id":"label_wait_create_profile","fr":"Un moment SVP, Cr\u00e9ation de votre profil en cours..."},{"id":"label_your_gender","fr":"Votre \u00eate"}]">

from MySQL database in user language (this example is in French (fr) so, i need to access in Javascript to each "id" and each value of this 'id"

Example : for the first "id"

i need to obtain on separate variables for each ID and VALUE

var label = "label_accept_terms"; and other variable var value = "En cliquant sur le bouton ci-dessous, vous accepter de respecter les "

so i have a problem to read and affected each ID with good label and value.

Thank you for your helping !

Upvotes: 0

Views: 131

Answers (2)

user1902830
user1902830

Reputation:

I must point out that you've made a mistake in your HTML. You should escape the quotes to avoid breaking attributes, for example, simply replace them with apostrophe:

<input id="page_json_language_index" type="hidden" value='[{"id":"label_accept_terms","fr":"En cliquant sur le bouton ci-dessous, vous accepter de respecter les "},{"id":"label_and","fr":" et la "},{"id":"label_birthdate","fr":"Anniversaire"},{"id":"label_bottom_about","fr":"\u00c0 propos de GayUrban"},{"id":"label_bottom_contact","fr":"Contactez-nous"},{"id":"label_bottom_copyright","fr":"\u00a9 2010-2013 GayUrban.Com - Tous droits r\u00e9serv\u00e9s"},{"id":"label_bottom_privacypolicy","fr":"Vie priv\u00e9e"},{"id":"label_bottom_termsofuse","fr":"Conditions d`...mon courriel"},{"id":"label_signon_twitter","fr":"Avec Twitter"},{"id":"label_slogan","fr":"LE site des rencontres LGBT !"},{"id":"label_terms_of_use","fr":"Conditions d`utilisation"},{"id":"label_title","fr":"Bienvenue sur GayUrban | LE site des rencontres LGBT !"},{"id":"label_transgender","fr":"Transgendre"},{"id":"label_username","fr":"Nom d`utilisateur"},{"id":"label_wait_create_profile","fr":"Un moment SVP, Cr\u00e9ation de votre profil en cours..."},{"id":"label_your_gender","fr":"Votre \u00eate"}]'>

JSON.parse is the best way to convert JSON string, but it's not surpported by old IE (e.g. IE6). You can use JSON2 to make it compatible, or just simply use eval().

Aware that abuse of eval() may lead to XSS (Cross Site Scripting) vulnerability. Make sure that the JSON you're about to parse is safe (doesn't include malicious Javascript).

Here's an example to read all id:

<input id="page_json_language_index" type="hidden" value='[{"id":"label_accept_terms","fr":"En cliquant sur le bouton ci-dessous, vous accepter de respecter les "},{"id":"label_and","fr":" et la "},{"id":"label_birthdate","fr":"Anniversaire"},{"id":"label_bottom_about","fr":"\u00c0 propos de GayUrban"},{"id":"label_bottom_contact","fr":"Contactez-nous"},{"id":"label_bottom_copyright","fr":"\u00a9 2010-2013 GayUrban.Com - Tous droits r\u00e9serv\u00e9s"},{"id":"label_bottom_privacypolicy","fr":"Vie priv\u00e9e"},{"id":"label_bottom_termsofuse","fr":"Conditions d`...mon courriel"},{"id":"label_signon_twitter","fr":"Avec Twitter"},{"id":"label_slogan","fr":"LE site des rencontres LGBT !"},{"id":"label_terms_of_use","fr":"Conditions d`utilisation"},{"id":"label_title","fr":"Bienvenue sur GayUrban | LE site des rencontres LGBT !"},{"id":"label_transgender","fr":"Transgendre"},{"id":"label_username","fr":"Nom d`utilisateur"},{"id":"label_wait_create_profile","fr":"Un moment SVP, Cr\u00e9ation de votre profil en cours..."},{"id":"label_your_gender","fr":"Votre \u00eate"}]'>

<textarea id="debug-console" cols="50" rows="20"></textarea>

<script type="text/javascript">
var arr = eval(document.getElementById("page_json_language_index").value),
    output = document.getElementById("debug-console");

//output all id
for(var i=0; i<arr.length; i++)
    output.value += [i, ": ", arr[i].id, "\n"].join("");

//show the first id
alert(arr[0].id);
</script>

Actually you can directly output JSON to Javascript. To meet your needs, I think here's what you need.

<?php
    ...
    $data = ...; //for example, from mysql query results
    $language = "fr"; //you can replace it with it/en/zh...
    ...
?>
<input id="some_id"></input>
<script>
(function() {
    var i18n = "<?php echo json_encode($data); ?>",
        lang = "<?php echo $language; ?>", //language
        data = eval(i18n); //you can also use JSON.parse/jQuery.parseJSON ...

    for(var i=0; i<data.length; i++) {
        document.getElementById(data[i].id).value = data[i][lang]; //a general way to read object's attribute in Javascript
    }
})()
</script>

Upvotes: 1

elclanrs
elclanrs

Reputation: 94101

i need to obtain on separate variables for each ID and VALUE

This is not the way to go, you don't want to pollute your scope with a bunch of variables. What you have is a collection (array of objects). You can loop such collection and access the properties you need.

var input = document.getElementById('page_json_language_index');
var data = JSON.parse(input.value); // collection

the goal is to assign to each pair of (id, fr) value into a jquery label

var label = function(lab) {
  return '<label id="'+ lab.id +'">'+ lab.fr +'</label>';
};

var labels = data.map(label);

You can also make it a jQuery collection:

var $labels = $(labels.join(''));

Then you can append it to any container:

$labels.appendTo('body');

Upvotes: 1

Related Questions