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

I am trying to get data from json and push to array but it is not working. it is possible or not getting multiple object values from json. anybody can tell it is possible or not? if it is possible how we can do it and where i stucked from my code?

我试图从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"} 
                 ] 
        }

3 个解决方案

#1

One change your structure of autocompVal array was wrong. I have changed it. Hope it helps you.

一个更改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>

#2

I have used pure js for most parts; Pushing json value to arrays have been achieved;

我在大多数零件上都使用了纯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>

#3

Not quite sure what you mean, but json stands for Javascript Object notation. So it's quite easy to get to its values. data = your json object. So

不太清楚你的意思,但json代表Javascript Object表示法。所以很容易达到它的价值。 data =你的json对象。所以

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

so you could assign searchVal = data.searchVal, or better yet, simply use the single json object as is.

所以你可以分配searchVal = data.searchVal,或者更好的是,只需按原样使用单个json对象。

Edit: I see you want the searchName values out of the searchVal into a new array. You could do something like:

编辑:我看到你希望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">

#1