Question

我正在尝试从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 Object表示法。所以很容易达到它的价值。 data =你的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;
});

＆＃13;

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;
    }
  });
});

＆＃13;

<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">

＆＃13;

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

3 个答案: