It doesn't work, because your input data is not organised as an array of objects, but as an object of arrays (which is less OOP).

As I prefer the array of objects as data structure, I would suggest to (temporarily) convert to that structure, and then your loop will work as expected:

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var array = data.id.map((id, i) => ({ id, name: data.name[i], price: data.price[i] }));
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(array, function(index, value){ 

                table += ('<tr>');
                table += ('<td>' + value.id + '</td>');
                table += ('<td><img src="' + value.name + '"></td>');
                table += ('<td>' + value.price + '</td>');
                table += ('</tr>');
            });

            table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

As an unrelated remark, I would suggest using jQuery more in the process of building the table. This will also avoid problems you might get when your data has < or & characters in it immediately followed by letters, as that would be interpreted as HTML:

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var array = data.id.map((id, i) => ({ id, name: data.name[i], price: data.price[i] }));
var i = 0;

$('#tableContainer').empty().append($("<table>").addClass("mainTable").append(
    $("<tr>").append(
        $("<th>").text("id"),
        $("<th>").text("name"),
        $("<th>").text("price")
    ),
    ...array.map(value =>
        $("<tr>").append(
            $("<td>").text(value.id),
            $("<td>").append($("<img>", { src: value.name })),
            $("<td>").text(value.price)
        )
    )
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

Your data structure is not iterable. So you need to either change your data structure to be a list [{id: '1111', name: 'name1', price: 1111}], or you need to assume that all lists (id, name, price) are the same length, and use that length for the iteration.

As other answers detail how to use an iterable data structure, I'll handle the other method, where your data is already in this format, and won't change.

For this method, find the length of one property (id, name or price), and iterate through all of them using the index. Here is an example.

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
data.id.forEach((value, index) => {
    table += ('<tr>');
    table += ('<td>' + data.id[index] + '</td>');
    table += ('<td><img src="' + data.name[index] + '"></td>');
    table += ('<td>' + data.price[index] + '</td>');
    table += ('</tr>');
});
table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

You're processing the data as if it were structured as a single array, like this:

data = [
  {
    id: 1986,
    name: "name1",
    price: 1148
  }
]

However, your data contains three arrays, not one:

data = {
  id: [...],
  name: [...],
  price: [...],
}

If the data was structured like the first example, then value would contain an object for each array element, with the properties id, name and price available.

An option is to convert the first data structure to the second:

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var mappedData = data.id.map((id, index) => ({
    id: id,
  name: data.name[index],
  price: data.price[index]
}))

Then, use the mappedData and access the properties as you're already doing, as follows:

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var mappedData = data.id.map((id, index) => ({
    id: id,
  name: data.name[index],
  price: data.price[index]
}))
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(dataMapped, function(index, value){ 

                table += ('<tr>');
                table += ('<td>' + value.id + '</td>');
                table += ('<td><img src="' + value.name + '"></td>');
                table += ('<td>' + value.price + '</td>');
                table += ('</tr>');
            });

            table += '</table>'; 
$('#tableContainer').html(table);