In Javascript there is a variable where the data is written in JSON format:

var json_test2 = {"a": "2", "b": "2"}; var a = json_test2.a; var b = json_test2.b;

I need to proceed from the values ​​of either a , or b , or on the json line as a whole to find the corresponding block in HTML (to display the contents of the block):

 <div data-number='{"a": "1", "b": "1"}'>Test1</div> <div data-number='{"a": "2", "b": "2"}'>Test2</div> <div data-number='{"a": "3", "b": "3"}'>Test3</div>

How can this be done using javascript (without jQuery)?

  • one
    Well, go over the whole element tree and find the one you need by the data-number attribute. What is the problem? Where is the code on js that you can't? - ArchDemon Sep.
  • @ArchDemon, Can you please tell if you can get on a specific attribute? For some reason it does not work: document.querySelector('div[data-number ="{"a": "2", "b": "2"}]') ; - Pavel

2 answers 2

 var json_test2 = {"a": "2", "b": "2"}; var a = json_test2.a; var b = json_test2.b; document.querySelectorAll('[data-number=\'{"a": "'+a+'", "b": "'+b+'"}\']')[0].innerHTML="Блок найден"; 
 <div data-number='{"a": "1", "b": "1"}'>Test1</div> <div data-number='{"a": "2", "b": "2"}'>Test2</div> <div data-number='{"a": "3", "b": "3"}'>Test3</div>

    For example, you can ...

      function go() { var json_test2 = {"a": "2", "b": "2"}; var a = json_test2.a; var b = json_test2.b; var input = document.getElementById(a + '.' + b).innerHTML; console.log(input); } 
      <div id="1.1">Test1</div> <div id="2.2">Test2</div> <div id="3.3">Test3</div> <div onclick="go();">go</div>

    • thanks for the answer. But div blocks should be like in the example - Pavel