How to find index of Json nested array in jquery?

Question

I'm creating an image uploader using Codeigniter3 and jQuery / Ajax.

Issue: I don't understand how to find the index of the array that I get from the ajax response as below result.

Here is the result when images upload

{
    "res": true,
    "img_pro": {
        "upload": {
            "file_name": "web_page-_500_x_420px-06s1.png",
            "file_type": "image\/png",
            "file_path": "/uploads\/",
            "full_path": "/uploads\/web_page-_500_x_420px-06s1.png",
            "raw_name": "web_page-_500_x_420px-06s1",
            "orig_name": "web_page-_500_x_420px-06s.png",
            "client_name": "web_page-_500_x_420px-06s.png",
            "file_ext": ".png",
            "file_size": 233.79,
            "is_image": true,
            "image_width": 563,
            "image_height": 420,
            "image_type": "png",
            "image_size_str": "width=\"563\" height=\"420\""
        }
    },
    "token": "e291d9b7176d23647470083f7ccfd166"
}

And I used $.ajax for sending images to the server

<script>
    $(document).ready(function () {
        $("#submit").on('click', function () {

            $.ajax({
                url: 'http://localhost/cootel/gotoadmin/image/upload',
                type: 'POST',
                data: new FormData($('#img_upload')[0]),
                contentType: false,
                cache: false,
                dataType: 'json',
                processData: false,
                success: function (data) {
                    var items = [];
                    $.each(data, function (key, val) {
                        console.log(val.upload['file_name']);
                if(val.upload.file_size ===2M){
                 alert("your file is 2M");
                  }
                    });
                }
            });

        });
    });
</script>

Thanks for help

Well - first problem I see is there is actually no array in the result. Check out this jsonmate.com permalink of your result - http://jsonmate.com/permalink/55af2de7aa522bae3683f13a . It's color-coded and you only have a nested object. You can get a value in code like `data.img_pro.upload.file_name` based on the hierarchy you see in that permalink I provided. — ThisClark, Jul 22 '15 at 05:50
What do mean with index? The result is an object with sub-objects. Not an array. Do you mean the property-describer? — cluster1, Jul 22 '15 at 05:56
@michael.zech: The _"property-describer"_ is commonly called the _"key"_ — Cerbrus, Jul 22 '15 at 05:56
@ThisClark Thanks you very much it is working now.and I have to remember data array and Json thanks too much — DMS-KH, Jul 22 '15 at 06:07
@ThisClark If I got this Json data How can I using Children and Id? [{"id":1,"children":[{"id":1,"children":[{"id":325},{"id":325},{"id":325},{"id":325}]},{"id":1,"children":[{"id":326},{"id":326}]},{"id":1,"children":[]},{"id":1,"children":[]},{"id":1,"children":[]},{"id":1,"children":[{"id":330}]},{"id":1,"children":[]}]},{"id":332,"children":[]} — DMS-KH, Jul 22 '15 at 06:20

score 2 · Accepted Answer · answered Jul 22 '15 at 06:41

Just use the old fashioned way..

success: function (data) {    
    var image;
    if(!data.img_pro || !data.img_pro.upload) {
        return;
    }
    image = data.img_pro.upload;

    if(image.file_size > 2M) {
        //Do something..
        return;
    }

    ..other checks..
}

score 0 · Answer 2 · answered Jul 22 '15 at 06:05

0

Use the "key" parameter which you assigned to the function (together with the "val" parameter): $.each(data, function (key, val) {

answered Jul 22 '15 at 06:05

cluster1

4,968
6
32
49

score -1 · Answer 3 · edited Jul 22 '15 at 05:53

jQuery has the $.inArray() method, which is similar to indexOf() method of JavaScript. Basically, it returns -1 when it didn't find any index.

For example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.inArray demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>"John" found at <span></span></div>
<div>4 found at <span></span></div>
<div>"Karl" not found, so <span></span></div>
<div>"Pete" is in the array, but not at or after index 2, so <span></span></div>

<script>
var arr = [ 4, "Pete", 8, "John" ];
var $spans = $( "span" );
$spans.eq( 0 ).text( jQuery.inArray( "John", arr ) );
$spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );
$spans.eq( 2 ).text( jQuery.inArray( "Karl", arr ) );
$spans.eq( 3 ).text( jQuery.inArray( "Pete", arr, 2 ) );
</script>

</body>
</html>

(Source)

This example is from the jquery api website.

please don't copy paste another site content. you can provide link to that site..please take a tour of Stackoverflow usage. — A.T., Jul 22 '15 at 05:53

How to find index of Json nested array in jquery?

3 Answers3