how to get values from array in javascript

Question

is it possible to compact all this id and name with variable?, I tried to $('#vidyagames').tokenInput([variable]); also tried to input url but nothing worked. I have function, that gets all data, that should be instead of id and name but I replaced function name, variable nothing worked. Also tried to use jQuery("#vidyagames") but also didnt work . I have database which consist table Game. And i want that instead of bunch of id and name was data from Game table and so i want without manually writing like this lines with id and name

 $scope.ingredient = [];


    $scope.getIngredient = function () {
        $http({
            url: 'http://127.0.0.1:8081/ingredient',
            method: "GET",
            headers: {
                "Access-Control-Allow-Origin": "*",
                "Content-Type": "application/json"
            }
        })
            .then(function (response) {
                    console.log("SUCCESS");
                    console.log(response);
                    $scope.ingredient = response.data;

                },
                function (response) { // optional
                    console.log("ERROR");
                    console.log(response);
                });
    }
    $scope.getIngredient();

 $(function(){ $('#vidyagames').tokenInput([ {id: 7, name: "Super Mario"}, {id: 11, name: "Battletoads"}, {id: 13, name: "Pong"}, {id: 17, name: "The Legend of Zelda"}, {id: 19, name: "Metroid"}, {id: 23, name: "Donkey Kong Country"}, {id: 29, name: "Super Smash Bros."}, {id: 32, name: "Star Fox"}, {id: 35, name: "Starcraft"}, {id: 37, name: "Pokemon"}, {id: 59, name: "Animal Crossing"}, {id: 62, name: "Spyro the Dragon"}, {id: 64, name: "Crash Bandicoot"}, {id: 65, name: "Sonic the Hedgehog"}, {id: 72, name: "Tomb Raider"}, {id: 77, name: "Mortal Kombat"}, {id: 81, name: "Space Invaders"} ], { theme: "facebook", hintText: "Know of any cool games?", noResultsText: "Nothin' found.", searchingText: "Gaming...", preventDuplicates: true }); });

 @import url('https://fonts.googleapis.com/css?family=Henny+Penny'); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { overflow-y: scroll; } body { background: #e7e7e7 url('https://i.imgur.com/qoKmNN9.png'); /* https://subtlepatterns.com/natural-paper/ */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 62.5%; line-height: 1; color: #444; padding-top: 25px; padding-bottom: 65px; } br { display: block; line-height: 1.6em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } input, textarea { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong,b { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } h1 { font-family: 'Henny Penny', Arial, sans-serif; font-weight: normal; font-size: 3.35em; line-height: 1.6em; margin-bottom: 15px; color: #616161; } p { font-size: 1.6em; line-height: 1.25em; margin-bottom: 15px; } /* page structure */ #wrapper { display: block; width: 800px; margin: 0 auto; background: #fff; padding: 35px 22px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.4); -moz-box-shadow: 1px 2px 1px rgba(0,0,0,0.4); box-shadow: 1px 1px 2px rgba(0,0,0,0.4); } #searchbar { display: block; padding: 15px 0px; } /* custom settings */ .token-input-token-facebook p { font-size: 1.0em; color: #555; } .token-input-selected-token-facebook p { color: #fff; } /** tokeninputs **/ /* Example tokeninput style #1: Token vertical list*/ ul.token-input-list { overflow: hidden; height: auto !important; height: 1%; width: 400px; border: 1px solid #999; cursor: text; font-size: 12px; font-family: Verdana; z-index: 999; margin: 0; padding: 0; background-color: #fff; list-style-type: none; clear: left; } ul.token-input-list li { list-style-type: none; } ul.token-input-list li input { border: 0; width: 350px; padding: 3px 8px; background-color: white; -webkit-appearance: caret; } li.token-input-token { overflow: hidden; height: auto !important; height: 1%; margin: 3px; padding: 3px 5px; background-color: #d0efa0; color: #000; font-weight: bold; cursor: default; display: block; } li.token-input-token p { float: left; padding: 0; margin: 0; } li.token-input-token span { float: right; color: #777; cursor: pointer; } li.token-input-selected-token { background-color: #08844e; color: #fff; } li.token-input-selected-token span { color: #bbb; } div.token-input-dropdown { position: absolute; width: 400px; background-color: #fff; overflow: hidden; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; cursor: default; font-size: 12px; font-family: Verdana; z-index: 1; } div.token-input-dropdown p { margin: 0; padding: 5px; font-weight: bold; color: #777; } div.token-input-dropdown ul { margin: 0; padding: 0; } div.token-input-dropdown ul li { background-color: #fff; padding: 3px; list-style-type: none; } div.token-input-dropdown ul li.token-input-dropdown-item { background-color: #fafafa; } div.token-input-dropdown ul li.token-input-dropdown-item2 { background-color: #fff; } div.token-input-dropdown ul li em { font-weight: bold; font-style: normal; } div.token-input-dropdown ul li.token-input-selected-dropdown-item { background-color: #d0efa0; } /** tokeninputs facebook **/ /* Example tokeninput style #2: Facebook style */ ul.token-input-list-facebook { overflow: hidden; height: auto !important; height: 1%; width: 550px; border: 1px solid #8496ba; cursor: text; font-size: 12px; font-family: Verdana; min-height: 1px; z-index: 999; margin: 0; padding: 0; background-color: #fff; list-style-type: none; clear: left; } ul.token-input-list-facebook li input { border: 0; width: 100px; padding: 3px 8px; background-color: white; margin: 2px 0; -webkit-appearance: caret; } li.token-input-token-facebook { overflow: hidden; height: auto !important; height: 15px; margin: 3px; padding: 1px 3px; background-color: #eff2f7; color: #000; cursor: default; border: 1px solid #ccd5e4; font-size: 11px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; float: left; white-space: nowrap; } li.token-input-token-facebook p { display: inline; padding: 0; margin: 0; } li.token-input-token-facebook span { color: #a6b3cf; margin-left: 5px; font-weight: bold; cursor: pointer; } li.token-input-selected-token-facebook { background-color: #5670a6; border: 1px solid #3b5998; color: #fff; } li.token-input-input-token-facebook { float: left; margin: 0; padding: 0; list-style-type: none; } div.token-input-dropdown-facebook { position: absolute; width: 400px; background-color: #fff; overflow: hidden; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; cursor: default; font-size: 11px; font-family: Verdana; z-index: 1; } div.token-input-dropdown-facebook p { margin: 0; padding: 5px; font-weight: bold; color: #777; } div.token-input-dropdown-facebook ul { margin: 0; padding: 0; } div.token-input-dropdown-facebook ul li { background-color: #fff; padding: 3px; margin: 0; list-style-type: none; } div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook { background-color: #fff; } div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook { background-color: #fff; } div.token-input-dropdown-facebook ul li em { font-weight: bold; font-style: normal; } div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { background-color: #3b5998; color: #fff; }

 <body> <div id="wrapper"> <h1>Dynamic Tag Input Suggestions</h1> <p>Start typing the name of a popular video game to get some helpful suggestions.</p> <div id="searchbar"> <input type="text" id="vidyagames" name="vidya"> </div> </div><!-- @end #wrapper --> </body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://loopj.com/jquery-tokeninput/src/jquery.tokeninput.js'></script><script src="./script.js"></script>

Answer 1

I entered data instead of bunch id and name there. Also added tokenValue:name. It previously didnt work bcz tokenValue:"name" name was double quoted