how to get multiple object json values and push to array using jquery

Question

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?

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

You are iterating directly on data instead of it iterate on "searchVal" as data.searchVal in first for each loop then on "optionVal" as data.optionVal in second for each loop then "autocompVal" as data.autocompVal in third one. — Lalit
– Lalit, Commented Nov 17, 2017 at 7:28

Lalit · Accepted Answer · 2017-11-17 07:43:15Z

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

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>

Rajkumar Somasundaram · Accepted Answer · 2017-11-17 08:39:52Z

2

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

$( 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>

answered Nov 17, 2017 at 8:39

Rajkumar Somasundaram

1,2702 gold badges11 silver badges20 bronze badges

2 Comments

Jonathan Over a year ago

You did not include jquery-ui in your snippet, I did but still don't get it working in a snippet, it does on jsfiddle though, kinda strange. So no auto-complete working as intended.

Rajkumar Somasundaram Over a year ago

correct me if am Wrong; your problem was not being able to traverse the json and push its content into array; this has been achieved; Yes, console shows error, if you scroll up you can find the values of your json; let me know if this is what u wanted.

Jonathan · Accepted Answer · 2017-11-17 09:39:17Z

1

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

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.

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

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

edited Nov 17, 2017 at 9:39

answered Nov 17, 2017 at 7:22

Jonathan

1,47115 silver badges23 bronze badges

3 Comments

Jonathan Over a year ago

How does your new json look? Can you update your post to reflect your new json? The autocompVal json was invalid, if you turned that into a normal array as Lalit suggested then you can simply use the value as is directly. autocompVal = data.autocompVal;

saranchel n Over a year ago

how can i assign inside autocomplete function to source?

Jonathan Over a year ago

when you declare the variable used in the autocomplete function make sure you do that at the highest level, so not in the on document ready but outside of it, else that variable's scope won't be accessible from your autocomplete function. You can update that variable from within the document ready function. See jsfiddle.net/uvhboLfz/3

Collectives™ on Stack Overflow

how to get multiple object json values and push to array using jquery

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related