html - How to push key:value to dictionary in JavaScript? - Stack Overflow

admin管理员组

文章数量:1405586

I have two HTML text input elements and one paragraph element. I have an empty javascript array and a function to push those two text input values as key:value into the array. I have a button to activate the function and print the array in the paragraph.

My javascript function is running but, the output is never producing [key:value],[key:value] but producing [object Object],[object Object]

HTML :

<input type="text" id="t1" />
<input type="text" id="t2" />
<button id="b1" onclick="add()">Push</button>
<p id="p1"></p>

JavaScript :

var t = [];     
function add() { 
    var t1 = document.getElementById('t1').value;
    var t2 = document.getElementById('t2').value;
    t.push({key:t1, value:t2});
    document.getElementById('p1').innerHTML=t;
    }

How can I properly pushing key:value to this array and print it?

Update I ended up going with an Object syntax that looks like this:

const m = {}
m[1] = 2
console.log(m, m[1])

I have two HTML text input elements and one paragraph element. I have an empty javascript array and a function to push those two text input values as key:value into the array. I have a button to activate the function and print the array in the paragraph.

My javascript function is running but, the output is never producing [key:value],[key:value] but producing [object Object],[object Object]

HTML :

<input type="text" id="t1" />
<input type="text" id="t2" />
<button id="b1" onclick="add()">Push</button>
<p id="p1"></p>

JavaScript :

var t = [];     
function add() { 
    var t1 = document.getElementById('t1').value;
    var t2 = document.getElementById('t2').value;
    t.push({key:t1, value:t2});
    document.getElementById('p1').innerHTML=t;
    }

How can I properly pushing key:value to this array and print it?

Update I ended up going with an Object syntax that looks like this:

const m = {}
m[1] = 2
console.log(m, m[1])

• javascript
• html
• arrays
• dictionary

Share Improve this question Follow edited Aug 11, 2020 at 18:07 WestCoastProjects 63.4k106106 gold badges365365 silver badges627627 bronze badges asked May 10, 2017 at 19:57 user7993717user7993717 2

• arrays don't have key/value pairs, but objects sort of do (property names and values). so, t will need to be initialized as an object, ie var t = {}; – James Commented May 10, 2017 at 20:00
• But when declare t={ } , it produce the output as [object Object]. Not [ t1 t2 ] – user7993717 Commented May 10, 2017 at 20:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You push elements in array correctly, the problem is conversion to string. You can see array in console.

function add() { 
  var t1 = document.getElementById('t1').value;
  var t2 = document.getElementById('t2').value;
  t.push({key:t1, value:t2});
  console.log(t);
}

var t = [];     
function add() { 
    var t1 = document.getElementById('t1').value;
    var t2 = document.getElementById('t2').value;
    t.push({key:t1, value:t2});
    render()
}

function render() {
  var html = '';
  t.forEach(function(element) {
    html += element['key'] +' = ' + element['value'] + '<br/>';
  })
  document.getElementById('p1').innerHTML = html;
}

<input type="text" id="t1" /> <input type="text" id="t2" /> <button id="b1" onclick="add()">Push</button> <p id="p1"></p>

本文标签： htmlHow to push keyvalue to dictionary in JavaScriptStack Overflow