How to run a json absolute path in a function

Question

i have a JSON object

stateObj:{
    template: {
              cache:false,
              ref :"templates/pages/menu",
              searchability: true,
              path: "content.AdminFichiers.aPropos.administrateurs",
              lastUpdate: "Dernières mises à jour"
          }
}

i call it like this

updatedata (stateObj.template.path);

the function to update the container looks like this

function updatedata (dataObj){ 
       var final = "stateObj",
           nameSplit = dataObj.split("."),
           uls = document.createElement("ul");

        for(i in nameSplit) {
            final +=  '["' + nameSplit[i] +'"]'
        }  
       console.log(final);
      for(var i in final){
           console.log(stateObj["content"]["AdminFichiers"]["aPropos"]["administrateurs"]);//this shows me the object
           console.log(final);//this shows me stateObj["content"]["AdminFichiers"]["aPropos"]["administrateurs"]  but i want the object
           uls.innerHTML +=  "<li class='col-3 inline-block card aliceblue fadeIn'><div>Prenom: "+final[i]["prenom"]+"</div><div>Nom: "+final[i]["nom"]+"</div><div>Tel: "+final[i]["tel"]+"</div><div>Mail: "+final[i]["mail"]+"</div><div> Localisation: "+i+"</div></li>"
      }
         contentElement.appendChild(uls)
    }

here is the console.log(final);

stateObj["content"]["AdminFichiers"]["aPropos"]["administrateurs"]

and here is what i get at the end

why am i getting undefine everywhere?

When i do

for(var i in final){console.log(stateObj["content"]["AdminFichiers"]["aPropos"]["administrate‌urs"]); }

it show me the result as object.

how can i run

stateObj["content"]["AdminFichiers"]["aPropos"]["administrateurs"]

on object

To fetch from a string you built, you'd need to use `eval()`, but there are *much* better ways. Also, don't use `for-in` on an Array in JS. It's fraught with peril. Use a `for` loop. — , Jun 12 '16 at 13:54

score 2 · Answer 1 · answered Jun 12 '16 at 13:23

Because you're trying to access an object property where there is none. Your final[i] will return a character in the 'i'-th position from the final string you're printed above. final[i] will return a character, not an object. So there's no way you'll end up with a value from something like final[i]["prenom"]

XCS · Accepted Answer · 2016-06-12T14:10:20.520

EDIT: After reprashing the question you made it much clearer. You wanted a way to convert the string "a[x][y][z]" to the actual Object pointed by it.

Using eval is not recommended, what you can do is:

start from Object Q = a
then go to the next key, Q = Q[x] (so now actually Q == a[x])
then to the next Q = Q[y] (Q == a[x][y])
and so on until you reach the last key, z (Q == a[x][y][z])

Code:

function updatedata (dataObj){ 
  var nameSplit = dataObj.split("."),
      uls = document.createElement("ul");

  // Start from the root object, follow each given key
  var final = stateObj;
  for(var i = 0; i < nameSplit.length; ++i) {
    var key = nameSplit[i];
    final = final[key];
  } 

  for(var i in final){
      // This next part is wrong, your final Array is an one dimensional String array
      // Accessing anything in the form of final[i][X] will not yield the result you are looking for
      // What are you trying to output?
       uls.innerHTML +=  "<li class='col-3 inline-block card aliceblue fadeIn'><div>Prenom: "+final[i]["prenom"]+"</div><div>Nom: "+final[i]["nom"]+"</div><div>Tel: "+final[i]["tel"]+"</div><div>Mail: "+final[i]["mail"]+"</div><div> Localisation: "+i+"</div></li>"
  }
     contentElement.appendChild(uls)
}

score 1 · Answer 3 · answered Jun 12 '16 at 13:22

Its happening because when you split the nameSplit in for-in loop, each letter comes each string. So, just use toString() function into make your function work.

Use this code :

function updatedata (dataObj){ 
   var final = "stateObj",
       nameSplit = dataObj.split("."),
       uls = document.createElement("ul");

   classList(uls).add("row", "text-center"); 

    for(i in nameSplit) {
        final +=  ' ["' + nameSplit[i] +'"]'
    }  
   final = final.toString().split(" ");
   console.log(final);
  for(var i in nameSplit){
       uls.innerHTML +=  "<li class='col-3 inline-block card aliceblue fadeIn'><div>Prenom: "+final[i]["prenom"]+"</div><div>Nom: "+final[i]["nom"]+"</div><div>Tel: "+final[i]["tel"]+"</div><div>Mail: "+final[i]["mail"]+"</div><div> Localisation: "+i+"</div></li>"
  }
     contentElement.appendChild(uls)
}

Hope it works for you :)

Here is the jsFiddle

The `toString()` is not needed. The `final` variable is already a `String`. — XCS, Jun 12 '16 at 13:32
@Cristy,Thinker But when i do for(var i in final){console.log(stateObj["content"]["AdminFichiers"]["aPropos"]["administrate‌urs"]); } it show me the result as object. please chek the update — Gildas.Tambo, Jun 12 '16 at 13:49

How to run a json absolute path in a function

3 Answers3