JavaScript - Add properties with different values to objects in array then render as HTML table

Question

Goal: I would like to take a list of n strings, add referential values, and inject them into HTML as rows in a table.

--- Details ---

I want to start with a list of n strings:

'object1'
'object2'
'object3'
...etc.

I then want to use those strings to figure out their properties by using them to match other data from API calls:

name: 'object1', id: 00112233, count: 25,
name: 'object2', id: 266924, count: 12884,
name: 'object3', id: 312011045, count: 8,
...etc.

Lastly, I want to render those objects and their properties in a table of n rows on a website:

  Name  |    ID     |  Count  |
--------|-----------|---------|
object1 | 00112233  | 25      |
object2 | 266924    | 12884   |
object3 | 312011045 | 8       |
...etc. | ...etc.   | ...etc. |

--- My Thought Process ---

I was thinking that it could make sense to store the original list of n strings as an array:

array = [
  'object1'
  'object2'
  'object3'
  //...etc.
]

Then use that array to create n objects inside another array:

objArray = array.map(e => {
    return{name: e};
});

Then somehow loop through that array of objects to add properties and individual values:

for (var i = 0; i <= objArray.length; i++) {
  objArray[i].id = <id value from API that corresponds with each object name>;
  objArray[i].count = <count value from API that corresponds with each object name>;
}

Hopefully we'd arrive at something like this, which could then be injected into an HTML table or something?:

objArray = [
  {name: 'object1', id: 00112233, count: 25},
  {name: 'object2', id: 266924, count: 12884},
  {name: 'object3', id: 312011045, count: 8},
  //etc...
]

--- TLDR ---

Goal: I would like to take a list of n strings, add referential values, and inject them into HTML as rows in a table.

• Am I on the right track with my thought process? Is there a more efficient way to do this that I'm missing?
• How do I loop through objects in an array to add additional properties with different values for each object?
• How do I inject an array of objects into an HTML table?

Thanks so much! This is my first question asked here, so please let me know if there's etiquette I'm not following.

Answer 1

1. right way for thought process can look

   <div id="tablebelow"> </div> var objArray = [ {name: 'object1', id: 00112233, count: 25}, {name: 'object2', id: 266924, count: 12884}, {name: 'object3', id: 312011045, count: 8} ] var tablehtml = "<table><tr><th></th> <th>Name </th><th>id</th><th>Count </th></tr>" ; $.each(objArray,function(key,value){ tablehtml += "<tr><td>"+ value.name + "</td>" ; tablehtml +="<td>"+value.id + "</td>" ; tablehtml += "<td>"+ value.count + "</td></tr>" ; }); $("#tablebelow").html(tablehtml);

Answer 2

OP here! In case anyone stumbles on this thread, my issue was that I didn't need to consider the following step at all, and it was in fact far easier to do something different:

---

Then use that array to create n objects inside another array:

objArray = array.map(e => {
    return{name: e};
});

---

What I did was scrap trying to map the string array to an object, and instead I directly pushed my results from the API into the array with the following:

for (let i = 0; i < stringList.length; i++) {
    $.ajax({
        'url': <api url> ,
        'headers': <api headers> ,
        'success': function (functionObj2) {
            objArray.push({
                "name": <name from api>,
                "count": <count from api>
            });
        }
    });
}

The root of my issue was that I didn't have the objArray.push section correct, and it was overwriting itself. I had essentially mis-attributed this problem to my normal JavaScript, rather than realizing it was a problem inside my ajax.