Get Value from array and write to html file with javascript

Question

I have the following source:

var testext = {
    "key1": "String1/1",
    "key2": "String2/1",
    "key4": "String4/1",
};

for (i = 0; i < testext.length; i++) {
    if (testext["key" + i]) {
        var outouter = "key: " + testext["key" + i];
        document.getElementById("id" + i).innerHTML = outouter;
    }
}

<p>Testpage with array values</p>

<div id="id1">Nothing set 1</div>
<div id="id2">Nothing set 2</div>
<div id="id3">Nothing set 3</div>
<div id="id4">Nothing set 4</div>
<div id="id5">Nothing set 5</div>

The way this is supposed to work is that the loop takes all the keys in the table and checks if there is a value to them and than writes that value to the div the value is there for.

If possible it would be great to have a key div mapping like key1 -> sorter, key2 -> boarder, key3 -> cars and so on, but this is far over my reach so I stick to the counting version.

The output should be:

String1/1
String2/1
Nothing set 3
String4/1
Nothing set 5

But for some reason this is not working. Any ideas of what is wrong?

Javascript object doesn't have a 'length' property.

jolmos
– jolmos

2016-01-13 10:13:58 +00:00
Commented Jan 13, 2016 at 10:13 — jolmos
– jolmos, Commented Jan 13, 2016 at 10:13

Jaffer · Accepted Answer · 2016-01-13 10:13:39Z

3

testtext is an object and not an array, so i just changed the for loop below, and getting number from key done using a regular expression. i checked, its working

    <body>
    <p>Testpage with array values</p>

    <div id="id1">Nothing set 1</div>
    <div id="id2">Nothing set 2</div>
    <div id="id3">Nothing set 3</div>
    <div id="id4">Nothing set 4</div>
    <div id="id5">Nothing set 5</div>

    <script>
    var testext = {
      "key1": "String1/1",
      "key2": "String2/1",
      "key4": "String4/1",
    };

    for(key in testext) {
    var outouter = testext[key];
  document.getElementById("id" + key.replace( /^\D+/g, '')).innerHTML = outouter;
}




</script>

</body>

answered Jan 13, 2016 at 10:13

Jaffer

2,97819 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thevagabond Over a year ago

Wow thanks for the answer. Just if it is possible, is there a way to use ids like car, chair, table, masks, and keys like key1, key2, key3 and map them like car->key1, chair->key2, masks -> key3 with the source above??

Tomalak Over a year ago

Warning: for .. in (at least without a guarding .hasOwnProperty) is not the recommended way of looping over object keys. Using Object.keys(testext).forEach(...) is a lot better.

Tomalak · Accepted Answer · 2016-01-13 10:24:16Z

2

Since this is tagged jQuery, why not use jQuery:

var testext = {
    "key1": "String1/1",
    "key2": "String2/1",
    "key4": "String4/1",
};

$("div").html(function () {
    var key = this.id.replace("id", "key");
    return (key in testext) ? testext[key] : this.innerHTML;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Testpage with array values</p>

<div id="id1">Nothing set 1</div>
<div id="id2">Nothing set 2</div>
<div id="id3">Nothing set 3</div>
<div id="id4">Nothing set 4</div>
<div id="id5">Nothing set 5</div>

This makes use of the fact that jQuery methods such as .html() run on all selected elements, all div elements in this case. They are, in fact, loops. Therefore we don't need to write a for loop ourselves.

Whatever you return from the function becomes the element's new HTML.

Since setting an element's HTML without actually changing it is not very efficient, we can turn it around:

var testext = {
    "key1": "String1/1",
    "key2": "String2/1",
    "key4": "String4/1",
};

$.each(testext, function (key, val) {
    var id = key.replace("key", "id");
    $("#" + id).html(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Testpage with array values</p>

<div id="id1">Nothing set 1</div>
<div id="id2">Nothing set 2</div>
<div id="id3">Nothing set 3</div>
<div id="id4">Nothing set 4</div>
<div id="id5">Nothing set 5</div>

This makes use of the fact that jQuery's $.each() helper method can loop over objects. In this sample we only change the HTML of elements that have a counterpart in the testext object.

edited Jan 13, 2016 at 10:24

answered Jan 13, 2016 at 10:17

Tomalak

340k68 gold badges547 silver badges635 bronze badges

4 Comments

Thevagabond Over a year ago

Wow thanks for the answer. Just if it is possible, is there a way to use ids like car, chair, table, masks, and keys like key1, key2, key3 and map them like car->key1, chair->key2, masks -> key3 with the source above??

Tomalak Over a year ago

I don't understand that question.

Thevagabond Over a year ago

var testext = { "key1": "String1/1", "key2": "String2/1", "key4": "String4/1", }; <div id="car">Nothing set 1</div> <div id="chair">Nothing set 2</div> <div id="table">Nothing set 3</div> <div id="masks">Nothing set 4</div> There is no counter on both sides. I wanted to ask if you can map something like this as well. Like map: key1->chair, key2-> table, key3-> masks

Tomalak Over a year ago

No, that's not possible because objects are unordered. You should not try to do that. If you want an ordered list of items, use an array. If you want key->value associations, use an object. There is no such thing as the "third thing" in an object.

Collectives™ on Stack Overflow

Get Value from array and write to html file with javascript

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related