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/ui/1.12.1/themes/base/jquery-ui.css">
<script src=".12.4.js"></script>
<script src=".12.1/jquery-ui.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var searchVal = [];
var optionVal = [];
var autopVal = [];
$.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 ) {
autopVal.push( key.autopVal );
});
console.log("Show all Array value="+searchVal +"=="+ optionVal +"=="+autopVal);
});
$("#autoComplete").autoplete({
source: autopVal,
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"}
],
"autopVal": [
{ "test11"},
{ "test12"} ,
{ "test13"},
{ "test14"}
]
}
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./ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var searchVal = [];
var optionVal = [];
var autopVal = [];
$.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 ) {
autopVal.push( key.autopVal );
});
console.log("Show all Array value="+searchVal +"=="+ optionVal +"=="+autopVal);
});
$("#autoComplete").autoplete({
source: autopVal,
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"}
],
"autopVal": [
{ "test11"},
{ "test12"} ,
{ "test13"},
{ "test14"}
]
}
- What is the output of console.log – Lalit Commented Nov 17, 2017 at 7:23
- i m not getting anything – saranchel n Commented Nov 17, 2017 at 7:26
- 2 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 "autopVal" as data.autopVal in third one. – Lalit Commented Nov 17, 2017 at 7:28
- 1 Your structure of autopVal is wrong. – Lalit Commented Nov 17, 2017 at 7:38
3 Answers
Reset to default 2One change your structure of autopVal 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"}
],
"autopVal": [
"test11",
"test12" ,
"test13",
"test14"
]
};
var searchVal = [];
var optionVal = [];
var autopVal = [];
$.each( data.searchVal, function( index, item ) {
searchVal.push( item.searchname );
});
$.each( data.optionVal, function( index, item ) {
optionVal.push( item.optionname );
});
$.each( data.autopVal, function( index, item ) {
autopVal.push(item);
});
console.log(searchVal);
console.log(optionVal);
console.log(autopVal);<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>I have used pure js for most parts; Pushing json value to arrays have been achieved;
$( document ).ready(function() {
var searchVal = [];
var optionVal = [];
var autopVal = [];
var data = {
"searchVal": [
{ "searchname":"test1"},
{ "searchname":"test2"}
],
"optionVal": [
{ "optionname":"test11"},
{ "optionname":"test12"},
{ "optionname":"test13"}
],
"autopVal": [
{ "optionname" : "test11"},
{ "optionname" : "test12"} ,
{ "optionname" : "test13"},
{ "optionname" : "test14"}
]
}
let keysArray = Object.keys(data);
let searchValArray = [];
let optionValArray = [];
let autopValArray = [];
keysArray.forEach((key) => {
if(key=="searchVal") searchValArray = (data[key]);
if(key=="optionVal") optionValArray = (data[key]);
if(key=="autopVal") autopValArray = (data[key]);
});
iterateAndPush(searchValArray,"searchname",searchVal);
iterateAndPush(optionValArray,"optionname",optionVal);
iterateAndPush(autopValArray,"optionname",autopVal);
function iterateAndPush(array,key,arrayToPush) {
array.map((searchKey) => {
arrayToPush.push(searchKey[key]);
});
}
console.log("Show all Array value="+searchVal +"=="+ optionVal +"=="+autopVal);
$("#autoComplete").autoplete({
source: autopVal,
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./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="autoComplete"></div>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, autopVal;
$(document).ready(function() {
var data = {
"searchVal": [{
"searchname": "test1"
},
{
"searchname": "test2"
}
],
"optionVal": [{
"optionname": "test11"
},
{
"optionname": "test12"
},
{
"optionname": "test13"
}
],
"autopVal": [
"test11",
"test12",
"test13",
"test14"
]
};
searchVal = data.searchVal.map(function(searchVal) {
return searchVal.searchname;
});
optionVal = data.optionVal.map(function(optionVal) {
return optionVal.optionname;
});
autopVal = data.autopVal;
console.log("Show all Array value="+searchVal +"=="+ optionVal +"=="+autopVal);
$("#autoComplete").autoplete({
source: autopVal,
select: function(event, ui) {
this.value = ui.item.label;
alert(this.value);
return false;
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis./ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<input type="text" id="autoComplete">