如何从javascript中的数组中获取值

如何解决如何从javascript中的数组中获取值

是否可以用变量压缩所有这些 id 和名称？，我尝试 $('#vidyagames').tokenInput([variable]);也尝试输入 url 但没有任何效果。我有函数，它获取所有数据，应该代替 id 和 name 但我替换了函数名，变量没有任何作用。还尝试使用 jQuery("#vidyagames") 但也没有用。我有包含表游戏的数据库。我希望那不是一堆 id 和 name 是来自游戏表的数据，所以我希望不用像这样手动编写带有 id 和 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,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',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.4);
  -moz-Box-shadow: 1px 2px 1px rgba(0,0.4);
  Box-shadow: 1px 1px 2px rgba(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>

解决方法

我在那里输入了数据而不是组 ID 和名称。还添加了 tokenValue:name。它以前不起作用 bcz tokenValue:"name" name 被双引号