0

How to pass array inside method while using the map in javascript?

<ul class="details">
    ${
        speedRecords.map(speed =>  `<li>${speed.name}<span>
        <a href="javascript:void(0)" onclick="showModalWithTopic(${speed.name} , ${speed.topics} )">${speed.total}</a></span></li>`)
        .join('')
    }
</ul>

speedRecords=[
    {
        total: 6
        name: "Wolks"
        topics: [
            {
                property1 : "one",
                property2 : "two"
            },
            {
                property1 : "55",
                property2 : "66"
            },
            {
                property1 : "11",
                property2 : "22"
            ]
    },
    {
        total: 5
        name: "Honda"
        topics: [
            {
                property1 : "one",
                property2 : "two"
            },
            {
                property1 : "55",
                property2 : "66"
            },
            {
                property1 : "11",
                property2 : "22"
            ]
    }
]

The line function showModalWithTopic(name, topics){} does do some other operation but topics always return to me as Object object.

When I look at this showModalWithTopic(${speed.name} , ${speed.topics}) method parameter is not created in proper way because it contains ('Honda' , [object Object],[object Object],[object Object] )

See also: enter image description here

Beginner
  • 145
  • 7
  • Does https://stackoverflow.com/questions/9991805/javascript-how-to-parse-json-array/9991872 answer your question? – Reporter Sep 13 '21 at 09:35
  • Are you using some templating library? `
      ` followed by `${` is not what you would expect in HTML, nor JavaScript, but looks like some templating framework. Please clarify.
     – trincot Sep 13 '21 at 09:50
  • I have a function ```function handleNewUser(speedRecords) {}``` where i am using this ```
      ``` setting this using innerHTML
     – Beginner Sep 13 '21 at 09:56

1 Answers1

0

Do you wanna do something like this :

 
speedRecords= [{
    total: 5,
    name: "Honda",
    topics: [{
      property1 : "one",
      property2 : "two"
        }, {
      property1 : "55",
      property2 : "66"
        }, {
      property1 : "11",
      property2 : "22"
    }]
}];

document.getElementById('displayElement').innerHTML = speedRecords.map(speed =>  `<li>
            ${speed.name}
        <span>
          <a href="javascript:void(0)" 
             onclick="showModalWithTopic(${speed.name} , ${speed.topics})">
             ${speed.total}
          </a>
        </span></li>`);
<ul class="details">
    <div id="displayElement"></div>
</ul>
Mohammed Akdim
  • 2,223
  • 1
  • 13
  • 21
  • I have created the same thing, you can check you do also have the same error ```showModalWithTopic()``` contains Object object, instead of containing list of object – Beginner Sep 13 '21 at 11:58
  • Maybe this link can help you : https://www.w3schools.com/js/js_object_display.asp – Mohammed Akdim Sep 13 '21 at 14:45