I mess up JSON object, arrays and strings

Question

So i´m, trying send data from php to js.

PHP

$balkTypes[] = $stmt->fetchAll();
echo json_encode($balkTypes);

JS

balkTypesData = {}; //Outside Ajaxcall

success: function(result){
    balkTypesData = result;
    Console.log(balkTypesData);
}

Console

[[{"id":"3","typ":"Bas 200*600","hojd":"200","bredd":"600","rec":"","viktM":"135"},{"id":"2","typ":"Bas 240*600","hojd":"240","bredd":"600","rec":"","viktM":"160"},{"id":"5","typ":"Isol\u00e4tt 240*600","hojd":"240","bredd":"600","rec":"","viktM":"105"},{"id":"4","typ":"Kontur 240*600","hojd":"240","bredd":"600","rec":"","viktM":"105"},{"id":"6","typ":"Passbit","hojd":"0","bredd":"0","rec":"","viktM":"0"}]]

Now, i´d like to search my Json object?!
I´d like to find "viktM" for "typ:Bas 200*600"

//Get balkType weight/m
var searchField = "typ";
var searchVal = "Bas 200*600";
for (var i=0 ; i < balkTypesData.length ; i++){
   if (balkTypesData[i][searchField] == searchVal) {
     weigth = balkTypesData[i]['viktM'];
     console.log(weigth);
   }
}

First of all, it seams that i cannot use .lengton "balkTypsData". it gives me 410 hits. Must be all characters?

Second, i cannot find how to access part of my object.
If i use: console.log(balkTypesData[i][searchField]);
I get: "Undefined"
I have also tried to remove the "[i].

So what am i missing?
Be gentle i´m still learning.

You are on the right track... look at JSON.parse() - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — corn3lius
– corn3lius, Commented Dec 9, 2015 at 14:04

Ben · Accepted Answer · 2015-12-09 14:05:35Z

5

Take a look at $.parseJSON() (jQuery) or JSON.parse() (vanilla):

With jQuery

success: function(result){
    balkTypesData = $.parseJSON(result);
    console.log(balkTypesData);
    console.log(balkTypesData[i][searchField]);
}

Without jQuery

success: function(result){
    balkTypesData = JSON.parse(result);
    console.log(balkTypesData);
    console.log(balkTypesData[i][searchField]);
}

answered Dec 9, 2015 at 14:05

Ben

8,9519 gold badges48 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Björn C Over a year ago

Oh, Thank you. Works very well!

Community · Accepted Answer · 2017-05-23 11:52:22Z

1

When you receive the data from your AJAX request it's not JSON, just a string.

The length result that you're getting is the length of the string, not the amount of elements within the array.

Furthermore you're setting $balkTypes[] which means that you're trying to add 1 entry in the array of $balkTypes however $stmt->fetchAll(); also returns an array so you now have a nested array which is not needed.

In your PHP file change

$balkTypes[] = $stmt->fetchAll()

to

$balkTypes = $stmt->fetchAll()

this will make sure that when you fetch your data it will be an array containing all objects instead of an array containing the array of objects.

Then in your JS, instead of trying to directly read from the string, use JSON.parse() to convert the json string into a collection of JS objects/integers/arrays/strings/booleans

e.g.

success: function(result) {
    balkTypesData = JSON.parse(result);
    console.log(balkTypesData);
}

EDIT

As pointed out by Armen you could also set the dataType: 'json' in the AJAX request, when the AJAX request returns it will automatically do the JSON.parse() so you can just directly console.log(result); to see the output.

Within the console.log you should now see the nested structure instead of just the string.

From here on your loop which checks the values seems correct and I would not change it unless it tells you that something is wrong.

Docs: JSON.parse();

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Dec 9, 2015 at 14:08

SidOfc

4,6143 gold badges30 silver badges50 bronze badges

1 Comment

Björn C Over a year ago

Very well explained. Thank you so much!

Armen · Accepted Answer · 2015-12-09 14:05:27Z

1

Set in your jQuery $.ajax request additional attribute dataType: 'json'

$.ajax({
  type: "POST",
  dataType: "json",
  url: url,
  data: { params },
  success: function( response ) 
  { 
     // Your data will be already json no need to parse it
     console.log(response);
  }
});

answered Dec 9, 2015 at 14:05

Armen

4,2123 gold badges27 silver badges43 bronze badges

2 Comments

Björn C Over a year ago

oh, so i can just add "Datatype" on my ajaxcall... cool. Thank you.

Armen Over a year ago

Yes exactly dataType: "json" will consider that return information is json and you will have in result already json look here - api.jquery.com/jquery.ajax

Orion · Accepted Answer · 2015-12-09 14:05:52Z

0

You are encoding a JSON on the PHP side. You are not decoding it on the JS side.

You should look at JSON.parse()

answered Dec 9, 2015 at 14:05

Orion

2271 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

I mess up JSON object, arrays and strings

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related