Question

如何使用 jquery 获取多个对象 json 值并推送到数组

2017-11-17

4389

javascript jquery html

我试图从 json 获取数据并推送到数组，但它不起作用。是否可以从 json 获取多个对象值。有人能告诉我这是否可行吗？如果可能，我们该怎么做，以及我的代码卡在哪里？

html

        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">

        $( document ).ready(function() {
              var searchVal = [];
            var optionVal = [];
            var autocompVal = [];
            $.getJSON( "datas.json", function( data ) {

          $.each( data, function( key, val ) {
            searchVal.push(  key.searchVal.searchname );
          });

           $.each( data, function( key, val ) {
            optionVal.push(  key.optionVal.optionname );
          });

           $.each( data, function( key, val ) {
            autocompVal.push(  key.autocompVal );
          });

        console.log("Show all Array value="+searchVal +"=="+ optionVal +"=="+autocompVal);

        });

        $("#autoComplete").autocomplete({
                source: autocompVal, 
                select: function (event, ui) {//when we select something from the search box
                    this.value = ui.item.label;
                    alert(this.value);
                    return false;
                } 
            });

        });

        </script>

        <input type="text" id="autoComplete">

datas.json:

        {
            "searchVal": [
                 { "searchname":"test1"},
                 { "searchname":"test2"} 
                 ],
            "optionVal": [
                 { "optionname":"test11"},
                 { "optionname":"test12"},
                 { "optionname":"test13"} 
                 ],
           "autocompVal": [
                 { "test11"},
                 { "test12"} ,
                 { "test13"},
                 { "test14"} 
                 ] 
        }

Answer 1

您的 autocompVal 数组结构有一点错误。我已经更改了。希望这对您有帮助。

var data =  {
            "searchVal": [
                 { "searchname":"test1"},
                 { "searchname":"test2"} 
                 ],
                 "optionVal": [
                 { "optionname":"test11"},
                 { "optionname":"test12"},
                 { "optionname":"test13"} 
                 ],
           "autocompVal": [
                  "test11",
                 "test12" ,
                  "test13",
                  "test14" 
                 ] 
        };

var searchVal = [];
var optionVal = [];
var autocompVal = [];

$.each( data.searchVal, function( index, item ) {
    searchVal.push(  item.searchname );
});

$.each( data.optionVal, function( index, item ) {
    optionVal.push(  item.optionname );
});

$.each( data.autocompVal, function( index, item ) {
     autocompVal.push(item);
});

console.log(searchVal);
console.log(optionVal);
console.log(autocompVal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

大部分我都用了纯 js；已经实现了将 json 值推送到数组；

$( document ).ready(function() {
            var searchVal = [];
            var optionVal = [];
            var autocompVal = [];
            
            var data = {
              "searchVal": [
                   { "searchname":"test1"},
                   { "searchname":"test2"} 
                   ],
              "optionVal": [
                   { "optionname":"test11"},
                   { "optionname":"test12"},
                   { "optionname":"test13"} 
                   ],
             "autocompVal": [
                   { "optionname" : "test11"},
                   { "optionname" : "test12"} ,
                   { "optionname" : "test13"},
                   { "optionname" : "test14"} 
                   ] 
              }

          let keysArray = Object.keys(data);
          let searchValArray = [];
          let optionValArray = [];
          let autocompValArray = [];
          keysArray.forEach((key) => {
            if(key=="searchVal") searchValArray = (data[key]);
            if(key=="optionVal") optionValArray = (data[key]);
            if(key=="autocompVal") autocompValArray = (data[key]);
          });


          iterateAndPush(searchValArray,"searchname",searchVal);
          iterateAndPush(optionValArray,"optionname",optionVal);
          iterateAndPush(autocompValArray,"optionname",autocompVal);

          function iterateAndPush(array,key,arrayToPush) {
            array.map((searchKey) => {
              arrayToPush.push(searchKey[key]);            
            });
          }

        console.log("Show all Array value="+searchVal +"=="+ optionVal +"=="+autocompVal);

        $("#autoComplete").autocomplete({
                source: autocompVal, 
                select: function (event, ui) {//when we select something from the search box
                    this.value = ui.item.label;
                    alert(this.value);
                    return false;
                } 
        });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="autoComplete"></div>

Answer 3

不太清楚您的意思，但 json 代表 Javascript 对象符号。因此很容易获取其值。数据 = 您的 json 对象。因此

data.searchVal[0].searchName === "test1"
data.searchVal.forEach(function(searchVal){....})

因此您可以分配 searchVal = data.searchVal ，或者更好的是，直接使用单个 json 对象。

编辑：我知道您希望将 searchVal 中的 searchName 值放入新数组中。您可以执行以下操作：

searchVal = data.searchVal.map(function(searchVal){
  return searchVal.searchName;
});

var searchVal, optionVal, autocompVal;

$(document).ready(function() {
  var data = {
    "searchVal": [{
        "searchname": "test1"
      },
      {
        "searchname": "test2"
      }
    ],
    "optionVal": [{
        "optionname": "test11"
      },
      {
        "optionname": "test12"
      },
      {
        "optionname": "test13"
      }
    ],
    "autocompVal": [
      "test11",
      "test12",
      "test13",
      "test14"
    ]
  };
  searchVal = data.searchVal.map(function(searchVal) {
    return searchVal.searchname;
  });
  optionVal = data.optionVal.map(function(optionVal) {
    return optionVal.optionname;
  });
  autocompVal = data.autocompVal;

  console.log("Show all Array value="+searchVal +"=="+ optionVal +"=="+autocompVal);

  $("#autoComplete").autocomplete({
    source: autocompVal,
    select: function(event, ui) {
      this.value = ui.item.label;
      alert(this.value);
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<input type="text" id="autoComplete">